API tools faq
paste
Advertisement
Chenten

Tailwind reponsive grid with cards

Chenten
Mar 28th, 2023
806
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 9.43 KB | None | 0 0
raw download clone embed print report
  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.     <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.16/dist/tailwind.min.css" rel="stylesheet">
  7.     <style>
  8.         .gradient {
  9.             background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  10.         }
  11.     </style>
  12.     <title>Tailwind Card Grid</title>
  13. </head>
  14. <body class="bg-gray-100">
  15.     <div class="container mx-auto my-10 px-4">
  16.         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
  17.             <!-- Repeat this block for each card -->
  18.             <div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-105">
  19.                 <div class="flex flex-wrap md:flex-nowrap">
  20.                     <div class="w-full md:w-1/3 h-48 md:h-auto md:min-h-full gradient"></div>
  21.                     <div class="p-8 w-full md:w-2/3">
  22.                         <h2 class="text-2xl font-semibold text-gray-900">How to always append attributes to Laravel Eloquent model</h2>
  23.                         <p class="mt-2 text-gray-500">Source: <a href="http://stackoverflow.com/questions/35701538/ddg#35701539" class="text-blue-600">Stack Overflow</a></p>
  24.                         <p class="mt-4">Tags: <span class="bg-blue-100 text-blue-700 rounded px-2 py-1 text-sm">php</span> <span class="bg-blue-100 text-blue-700 rounded px-2 py-1 text-sm">api</span> <span class="bg-blue-100 text-blue-700 rounded px-2 py-1 text-sm">laravel</span> <span class="bg-blue-100 text-blue-700 rounded px-2 py-1 text-sm">laravel-5</span> <span class="bg-blue-100 text-blue-700 rounded px-2 py-1 text-sm">restful-architecture</span></p>
  25.                         <p class="mt-4 text-gray-700">Answer by: <a href="http://stackoverflow.com/users/5751341/ddg" class="text-blue-600">Mustafa Dwekat</a></p>
  26.                         <p class="mt-4 text-gray-700">After some search I found that you simply need to add the <b>attribute</b> you want to the <code>$appends</code> array in your <b>Eloquent</b> <b>Model</b>...</p>
  27.                         <p class="mt-4"><a href="http://stackoverflow.com/questions/35701538/ddg#35701539" class="text-blue-600 font-semibold">Read More</a></p>
  28.                     </div>
  29.                 </div>
  30.             </div>
  31.           <div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-105">
  32.                 <div class="flex flex-wrap md:flex-nowrap">
  33.                     <div class="w-full md:w-1/3 h-48 md:h-auto md:min-h-full gradient"></div>
  34.                     <div class="p-8 w-full md:w-2/3">
  35.                         <h2 class="text-2xl font-semibold text-gray-900">How to always append attributes to Laravel Eloquent model</h2>
  36.                         <p class="mt-2 text-gray-500">Source: <a href="http://stackoverflow.com/questions/35701538/ddg#35701539" class="text-blue-600">Stack Overflow</a></p>
  37.                         <p class="mt-4">Tags: <span class="bg-blue-100 text-blue-700 rounded px-2 py-1 text-sm">php</span> <span class="bg-blue-100 text-blue-700 rounded px-2 py-1 text-sm">api</span> <span class="bg-blue-100 text-blue-700 rounded px-2 py-1 text-sm">laravel</span> <span class="bg-blue-100 text-blue-700 rounded px-2 py-1 text-sm">laravel-5</span> <span class="bg-blue-100 text-blue-700 rounded px-2 py-1 text-sm">restful-architecture</span></p>
  38.                         <p class="mt-4 text-gray-700">Answer by: <a href="http://stackoverflow.com/users/5751341/ddg" class="text-blue-600">Mustafa Dwekat</a></p>
  39.                         <p class="mt-4 text-gray-700">After some search I found that you simply need to add the <b>attribute</b> you want to the <code>$appends</code> array in your <b>Eloquent</b> <b>Model</b>...</p>
  40.                         <p class="mt-4"><a href="http://stackoverflow.com/questions/35701538/ddg#35701539" class="text-blue-600 font-semibold">Read More</a></p>
  41.                     </div>
  42.                 </div>
  43.             </div>
  44.           <div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-105">
  45.                 <div class="flex flex-wrap md:flex-nowrap">
  46.                     <div class="w-full md:w-1/3 h-48 md:h-auto md:min-h-full gradient"></div>
  47.                     <div class="p-8 w-full md:w-2/3">
  48.                         <h2 class="text-2xl font-semibold text-gray-900">How to always append attributes to Laravel Eloquent model</h2>
  49.                         <p class="mt-2 text-gray-500">Source: <a href="http://stackoverflow.com/questions/35701538/ddg#35701539" class="text-blue-600">Stack Overflow</a></p>
  50.                         <p class="mt-4">Tags: <span class="bg-blue-100 text-blue-700 rounded px-2 py-1 text-sm">php</span> <span class="bg-blue-100 text-blue-700 rounded px-2 py-1 text-sm">api</span> <span class="bg-blue-100 text-blue-700 rounded px-2 py-1 text-sm">laravel</span> <span class="bg-blue-100 text-blue-700 rounded px-2 py-1 text-sm">laravel-5</span> <span class="bg-blue-100 text-blue-700 rounded px-2 py-1 text-sm">restful-architecture</span></p>
  51.                         <p class="mt-4 text-gray-700">Answer by: <a href="http://stackoverflow.com/users/5751341/ddg" class="text-blue-600">Mustafa Dwekat</a></p>
  52.                         <p class="mt-4 text-gray-700">After some search I found that you simply need to add the <b>attribute</b> you want to the <code>$appends</code> array in your <b>Eloquent</b> <b>Model</b>...</p>
  53.                         <p class="mt-4"><a href="http://stackoverflow.com/questions/35701538/ddg#35701539" class="text-blue-600 font-semibold">Read More</a></p>
  54.                     </div>
  55.                 </div>
  56.             </div>
  57.           <div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-105">
  58.                 <div class="flex flex-wrap md:flex-nowrap">
  59.                     <div class="w-full md:w-1/3 h-48 md:h-auto md:min-h-full gradient"></div>
  60.                     <div class="p-8 w-full md:w-2/3">
  61.                         <h2 class="text-2xl font-semibold text-gray-900">How to always append attributes to Laravel Eloquent model</h2>
  62.                         <p class="mt-2 text-gray-500">Source: <a href="http://stackoverflow.com/questions/35701538/ddg#35701539" class="text-blue-600">Stack Overflow</a></p>
  63.                         <p class="mt-4">Tags: <span class="bg-blue-100 text-blue-700 rounded px-2 py-1 text-sm">php</span> <span class="bg-blue-100 text-blue-700 rounded px-2 py-1 text-sm">api</span> <span class="bg-blue-100 text-blue-700 rounded px-2 py-1 text-sm">laravel</span> <span class="bg-blue-100 text-blue-700 rounded px-2 py-1 text-sm">laravel-5</span> <span class="bg-blue-100 text-blue-700 rounded px-2 py-1 text-sm">restful-architecture</span></p>
  64.                         <p class="mt-4 text-gray-700">Answer by: <a href="http://stackoverflow.com/users/5751341/ddg" class="text-blue-600">Mustafa Dwekat</a></p>
  65.                         <p class="mt-4 text-gray-700">After some search I found that you simply need to add the <b>attribute</b> you want to the <code>$appends</code> array in your <b>Eloquent</b> <b>Model</b>...</p>
  66.                         <p class="mt-4"><a href="http://stackoverflow.com/questions/35701538/ddg#35701539" class="text-blue-600 font-semibold">Read More</a></p>
  67.                     </div>
  68.                 </div>
  69.             </div>
  70.           <div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-105">
  71.                 <div class="flex flex-wrap md:flex-nowrap">
  72.                     <div class="w-full md:w-1/3 h-48 md:h-auto md:min-h-full gradient"></div>
  73.                     <div class="p-8 w-full md:w-2/3">
  74.                         <h2 class="text-2xl font-semibold text-gray-900">How to always append attributes to Laravel Eloquent model</h2>
  75.                         <p class="mt-2 text-gray-500">Source: <a href="http://stackoverflow.com/questions/35701538/ddg#35701539" class="text-blue-600">Stack Overflow</a></p>
  76.                         <p class="mt-4">Tags: <span class="bg-blue-100 text-blue-700 rounded px-2 py-1 text-sm">php</span> <span class="bg-blue-100 text-blue-700 rounded px-2 py-1 text-sm">api</span> <span class="bg-blue-100 text-blue-700 rounded px-2 py-1 text-sm">laravel</span> <span class="bg-blue-100 text-blue-700 rounded px-2 py-1 text-sm">laravel-5</span> <span class="bg-blue-100 text-blue-700 rounded px-2 py-1 text-sm">restful-architecture</span></p>
  77.                         <p class="mt-4 text-gray-700">Answer by: <a href="http://stackoverflow.com/users/5751341/ddg" class="text-blue-600">Mustafa Dwekat</a></p>
  78.                         <p class="mt-4 text-gray-700">After some search I found that you simply need to add the <b>attribute</b> you want to the <code>$appends</code> array in your <b>Eloquent</b> <b>Model</b>...</p>
  79.                         <p class="mt-4"><a href="http://stackoverflow.com/questions/35701538/ddg#35701539" class="text-blue-600 font-semibold">Read More</a></p>
  80.                     </div>
  81.                 </div>
  82.             </div>
  83.             <!-- End of card block -->
  84.         </div>
  85.     </div>
  86. </body>
  87. </html>
  88.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!