BeerikNL/tailwind-grid-explorer
0
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>Tailwind Grid Explorer</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <script>9 tailwind.config = {10 theme: {11 extend: {12 colors: {13 primary: {14 500: '#3B82F6', // Default blue if undefined15 },16 secondary: {17 500: '#10B981', // Default emerald if undefined18 }19 }20 }21 }22 }23 </script>24 <style>25 .grid-item {26 transition: all 0.3s ease;27 }28 .grid-item:hover {29 transform: translateY(-5px);30 box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);31 }32 </style>33</head>34<body class="bg-gray-50 min-h-screen">35 <div class="container mx-auto px-4 py-12">36 <h1 class="text-4xl font-bold text-center mb-12 text-gray-800">Tailwind Grid Explorer</h1>37 38 <!-- Basic Grid Example -->39 <div class="mb-16">40 <h2 class="text-2xl font-semibold mb-6 text-gray-700">Basic Grid</h2>41 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">42 <div class="grid-item bg-primary-500 rounded-lg p-8 text-white">43 <h3 class="text-xl font-bold mb-3">Primary Color</h3>44 <p>Using bg-primary-500 for the primary color</p>45 </div>46 <div class="grid-item bg-secondary-500 rounded-lg p-8 text-white">47 <h3 class="text-xl font-bold mb-3">Secondary Color</h3>48 <p>Using bg-secondary-500 for the secondary color</p>49 </div>50 <div class="grid-item bg-gray-200 rounded-lg p-8">51 <h3 class="text-xl font-bold mb-3">Neutral</h3>52 <p>Default gray background for contrast</p>53 </div>54 </div>55 </div>56 57 <!-- Responsive Grid with Varied Items -->58 <div class="mb-16">59 <h2 class="text-2xl font-semibold mb-6 text-gray-700">Responsive Grid</h2>60 <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">61 <div class="grid-item bg-primary-100 rounded-lg p-6 col-span-2 md:col-span-1">62 <h3 class="text-lg font-semibold mb-2 text-primary-800">Wide Item</h3>63 <p class="text-primary-600">Spans 2 cols on mobile, 1 on larger screens</p>64 </div>65 <div class="grid-item bg-secondary-100 rounded-lg p-6">66 <h3 class="text-lg font-semibold mb-2 text-secondary-800">Regular</h3>67 <p class="text-secondary-600">Standard grid item</p>68 </div>69 <div class="grid-item bg-primary-200 rounded-lg p-6">70 <h3 class="text-lg font-semibold mb-2 text-primary-800">Regular</h3>71 <p class="text-primary-600">Standard grid item</p>72 </div>73 <div class="grid-item bg-secondary-200 rounded-lg p-6 row-span-2">74 <h3 class="text-lg font-semibold mb-2 text-secondary-800">Tall Item</h3>75 <p class="text-secondary-600">Spans 2 rows</p>76 </div>77 <div class="grid-item bg-primary-300 rounded-lg p-6">78 <h3 class="text-lg font-semibold mb-2 text-primary-800">Regular</h3>79 <p class="text-primary-600">Standard grid item</p>80 </div>81 <div class="grid-item bg-secondary-300 rounded-lg p-6">82 <h3 class="text-lg font-semibold mb-2 text-secondary-800">Regular</h3>83 <p class="text-secondary-600">Standard grid item</p>84 </div>85 </div>86 </div>87 88 <!-- Grid with Cards -->89 <div>90 <h2 class="text-2xl font-semibold mb-6 text-gray-700">Card Grid</h2>91 <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">92 <div class="grid-item bg-white rounded-xl shadow-md overflow-hidden">93 <div class="bg-primary-500 h-48 flex items-center justify-center">94 <span class="text-white text-2xl font-bold">Primary</span>95 </div>96 <div class="p-6">97 <h3 class="text-xl font-bold mb-2 text-gray-800">Primary Color Card</h3>98 <p class="text-gray-600">This card uses the primary color for its header</p>99 </div>100 </div>101 <div class="grid-item bg-white rounded-xl shadow-md overflow-hidden">102 <div class="bg-secondary-500 h-48 flex items-center justify-center">103 <span class="text-white text-2xl font-bold">Secondary</span>104 </div>105 <div class="p-6">106 <h3 class="text-xl font-bold mb-2 text-gray-800">Secondary Color Card</h3>107 <p class="text-gray-600">This card uses the secondary color for its header</p>108 </div>109 </div>110 <div class="grid-item bg-white rounded-xl shadow-md overflow-hidden">111 <div class="bg-gradient-to-r from-primary-500 to-secondary-500 h-48 flex items-center justify-center">112 <span class="text-white text-2xl font-bold">Gradient</span>113 </div>114 <div class="p-6">115 <h3 class="text-xl font-bold mb-2 text-gray-800">Gradient Header</h3>116 <p class="text-gray-600">Combining both primary and secondary colors</p>117 </div>118 </div>119 </div>120 </div>121 </div>122</body>123</html>124