پیشنمایش زنده
کد HTML
<div class="container mx-auto px-4 py-8 max-w-md">
<div class="grid grid-cols-2 gap-6">
<div class="bg-white rounded-lg p-6 shadow-md">
<h2 class="text-xl font-semibold mb-2">Tarjeta 1</h2>
<p class="text-gray-600">Contenido de la tarjeta 1...</p>
</div>
<div class="bg-white rounded-lg p-6 shadow-md">
<h2 class="text-xl font-semibold mb-2">Tarjeta 2</h2>
<p class="text-gray-600">Contenido de la tarjeta 2...</p>
</div>
<div class="bg-white rounded-lg p-6 shadow-md">
<h2 class="text-xl font-semibold mb-2">Tarjeta 3</h2>
<p class="text-gray-600">Contenido de la tarjeta 3...</p>
</div>
<div class="bg-white rounded-lg p-6 shadow-md">
<h2 class="text-xl font-semibold mb-2">Tarjeta 4</h2>
<p class="text-gray-600">Contenido de la tarjeta 4...</p>
</div>
</div>
</div>
کد CSS
.container{width:100%}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.mx-auto{margin-left:auto;margin-right:auto}.mb-2{margin-bottom:0.5rem}.grid{display:grid}.max-w-md{max-width:28rem}.grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.gap-6{gap:1.5rem}.rounded-lg{border-radius:0.5rem}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.p-6{padding:1.5rem}.px-4{padding-left:1rem;padding-right:1rem}.py-8{padding-top:2rem;padding-bottom:2rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-semibold{font-weight:600}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity))}.shadow-md{--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}