card | کتابخانه کامپوننت‌ها

پیش‌نمایش زنده

کد HTML

<div class="container mx-auto px-4 py-8 max-w-md">
    <div class="grid grid-cols-2 gap-6">
      
      <div class="bg-gradient-to-r from-purple-500 to-pink-500 rounded-lg p-6 shadow-lg text-white">
        <h2 class="text-xl font-semibold mb-2">Tarjeta 1</h2>
        <p class="text-gray-200">Contenido de la tarjeta 1...</p>
      </div>

      
      <div class="bg-gradient-to-r from-blue-500 to-teal-500 rounded-lg p-6 shadow-lg text-white">
        <h2 class="text-xl font-semibold mb-2">Tarjeta 2</h2>
        <p class="text-gray-200">Contenido de la tarjeta 2...</p>
      </div>

      
      <div class="bg-gradient-to-r from-green-500 to-lime-500 rounded-lg p-6 shadow-lg text-white">
        <h2 class="text-xl font-semibold mb-2">Tarjeta 3</h2>
        <p class="text-gray-200">Contenido de la tarjeta 3...</p>
      </div>

      
      <div class="bg-gradient-to-r from-yellow-500 to-amber-500 rounded-lg p-6 shadow-lg text-white">
        <h2 class="text-xl font-semibold mb-2">Tarjeta 4</h2>
        <p class="text-gray-200">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-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops))
}

.from-blue-500 {
  --tw-gradient-from: #3b82f6 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.from-green-500 {
  --tw-gradient-from: #22c55e var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(34 197 94 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.from-purple-500 {
  --tw-gradient-from: #a855f7 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(168 85 247 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.from-yellow-500 {
  --tw-gradient-from: #eab308 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(234 179 8 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.to-amber-500 {
  --tw-gradient-to: #f59e0b var(--tw-gradient-to-position)
}

.to-lime-500 {
  --tw-gradient-to: #84cc16 var(--tw-gradient-to-position)
}

.to-pink-500 {
  --tw-gradient-to: #ec4899 var(--tw-gradient-to-position)
}

.to-teal-500 {
  --tw-gradient-to: #14b8a6 var(--tw-gradient-to-position)
}

.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-200 {
  --tw-text-opacity: 1;
  color: rgb(229 231 235 / var(--tw-text-opacity))
}

.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity))
}

.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

نوع: card

تاریخ ایجاد: 2026/06/06

آخرین بروزرسانی: 2026/06/06