Apppublic
nasacmd/spacing-divinity

sourceHugging Faceupdated 10mo agoView on Hugging Face
0likes
index.html114 linesDownload Raw Back to root
1<!DOCTYPE html>2<html lang="en">3<head>4    <meta charset="UTF-8">5    <meta name="viewport" content="width=device-width, initial-scale=1.0">6    <title>Spacing Divinity</title>7    <link rel="stylesheet" href="style.css">8    <script src="https://cdn.tailwindcss.com"></script>9    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10    <script src="https://unpkg.com/feather-icons"></script>11    <script>12      tailwind.config = {13        theme: {14          extend: {15            spacing: {16              '128': '32rem',17              '144': '36rem',18            }19          }20        }21      }22    </script>23</head>24<body class="min-h-screen bg-gray-100">25    <div class="container mx-auto px-4 py-12">26        <h1 class="text-4xl font-bold text-center mb-12">Div Spacing Playground</h1>27        28        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">29            <!-- Div 1 -->30            <div class="bg-white rounded-lg shadow-lg p-6 transform hover:scale-105 transition duration-300">31                <div class="flex items-center justify-between mb-4">32                    <h2 class="text-xl font-semibold">Divinity Spacer</h2>33                    <i data-feather="package" class="text-indigo-500"></i>34                </div>35                <p class="text-gray-600 mb-6">This div has generous spacing for content to breathe.</p>36                <div class="space-y-4">37                    <div class="h-12 bg-indigo-100 rounded-md"></div>38                    <div class="h-12 bg-indigo-100 rounded-md"></div>39                    <div class="h-12 bg-indigo-100 rounded-md"></div>40                </div>41            </div>42 43            <!-- Div 2 -->44            <div class="bg-white rounded-lg shadow-lg p-6 transform hover:scale-105 transition duration-300">45                <div class="flex items-center justify-between mb-4">46                    <h2 class="text-xl font-semibold">Compact Spacer</h2>47                    <i data-feather="box" class="text-purple-500"></i>48                </div>49                <p class="text-gray-600 mb-6">Tighter spacing for denser information.</p>50                <div class="space-y-2">51                    <div class="h-12 bg-purple-100 rounded-md"></div>52                    <div class="h-12 bg-purple-100 rounded-md"></div>53                    <div class="h-12 bg-purple-100 rounded-md"></div>54                </div>55            </div>56 57            <!-- Div 3 -->58            <div class="bg-white rounded-lg shadow-lg p-6 transform hover:scale-105 transition duration-300">59                <div class="flex items-center justify-between mb-4">60                    <h2 class="text-xl font-semibold">Vertical Rhythm</h2>61                    <i data-feather="layout" class="text-pink-500"></i>62                </div>63                <p class="text-gray-600 mb-6">Perfect vertical spacing harmony.</p>64                <div class="space-y-8">65                    <div class="h-12 bg-pink-100 rounded-md"></div>66                    <div class="h-12 bg-pink-100 rounded-md"></div>67                    <div class="h-12 bg-pink-100 rounded-md"></div>68                </div>69            </div>70        </div>71 72        <!-- Spacing Controls -->73        <div class="mt-16 bg-white rounded-lg shadow-lg p-6 max-w-3xl mx-auto">74            <h2 class="text-2xl font-bold mb-6">Spacing Controls</h2>75            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">76                <div class="space-y-4">77                    <h3 class="font-semibold">Margin</h3>78                    <div class="flex flex-wrap gap-2">79                        <button class="px-3 py-1 bg-gray-200 rounded hover:bg-gray-300">m-0</button>80                        <button class="px-3 py-1 bg-gray-200 rounded hover:bg-gray-300">m-2</button>81                        <button class="px-3 py-1 bg-gray-200 rounded hover:bg-gray-300">m-4</button>82                        <button class="px-3 py-1 bg-gray-200 rounded hover:bg-gray-300">m-8</button>83                    </div>84                </div>85                86                <div class="space-y-4">87                    <h3 class="font-semibold">Padding</h3>88                    <div class="flex flex-wrap gap-2">89                        <button class="px-3 py-1 bg-gray-200 rounded hover:bg-gray-300">p-0</button>90                        <button class="px-3 py-1 bg-gray-200 rounded hover:bg-gray-300">p-2</button>91                        <button class="px-3 py-1 bg-gray-200 rounded hover:bg-gray-300">p-4</button>92                        <button class="px-3 py-1 bg-gray-200 rounded hover:bg-gray-300">p-8</button>93                    </div>94                </div>95                96                <div class="space-y-4">97                    <h3 class="font-semibold">Gap</h3>98                    <div class="flex flex-wrap gap-2">99                        <button class="px-3 py-1 bg-gray-200 rounded hover:bg-gray-300">gap-0</button>100                        <button class="px-3 py-1 bg-gray-200 rounded hover:bg-gray-300">gap-2</button>101                        <button class="px-3 py-1 bg-gray-200 rounded hover:bg-gray-300">gap-4</button>102                        <button class="px-3 py-1 bg-gray-200 rounded hover:bg-gray-300">gap-8</button>103                    </div>104                </div>105            </div>106        </div>107    </div>108 109    <script>110        feather.replace();111    </script>112<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>113</body>114</html>