Modern Responsive Card Design with Vibrant Green & Dark Contrast

<!-- Tailwind CSS CDN -->
<link
  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css"
  rel="stylesheet"
/>

<style>
  :root {
    --card-bg: #c5e47d; /* Default card background color */
  }

  /* Kart genel stilleri */
  .card {
    background-color: var(--card-bg); /* Normal state */
    color: #333;
    border: 2px solid #143c14; /* Kartların kenarlığı */
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
  }
  .card:hover {
    background-color: #143c14; /* Hover state: dark tone */
    color: var(--card-bg); /* Genel metin rengi hover durumunda varsayılan arka plan rengi oluyor */
    border-color: var(--card-bg); /* Hover durumunda kenarlık rengi değişiyor */
    transform: scale(1.05) translateY(-5px);
  }

  /* Kart başlıkları için (h2) resetleyici stil */
  .card h2 {
    font-size: 1.875rem; /* Tailwind text-3xl eşdeğeri */
    font-weight: 700 !important; /* Kalın font */
    line-height: 1.2 !important;  /* İstenen satır yüksekliği */
    margin-bottom: 1rem !important; /* mb-4 eşdeğeri */
    color: inherit; /* Renk, kartın normal durumundan alınır */
    transition: color 0.3s ease !important;
  }

  /* Kart başlıklarının hover durumunda renk değiştirmesi */
  .card:hover h2 {
    color: var(--card-bg) !important;
  }

  /* Kart paragraf (p) stilleri */
  .card p {
    transition: color 0.3s ease !important;
  }
  .card:hover p {
    color: var(--card-bg) !important;
  }

  /* Buton stilleri */
  .btn-custom {
    background-color: #143c14;
    color: #fff;
    transition: background-color 0.3s ease, transform 0.3s ease, color 0.3s ease;
  }
  .btn-custom:hover {
    background-color: #1a4f1a; /* Hover durumunda hafif daha açık koyu yeşil */
    transform: translateY(-2px);
  }

  /* Kart hover durumunda buton stilinde değişiklik */
  .card:hover .btn-custom,
  .card:hover .btn-custom:hover {
    background-color: #c5e47d;
    color: #000;
  }

  /* Butonların tam ortada görünmesi için özel stil (global stilleri geçersiz kılacak) */
  .card button.btn-custom {
    display: inline-block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
</style>

<div class="container mx-auto px-4 py-12 max-w-7xl">
  <!-- Ana Başlık -->
  <h1 class="text-4xl font-extrabold text-gray-800 mb-10 text-center">
    Aesthetic Card Example
  </h1>

  <!-- Grid: Mobilde 1, md'de 2, lg'de 3 sütun -->
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">

    <!-- Kart 1 -->
    <div class="card p-8 rounded-xl shadow-lg hover:shadow-2xl text-center transition-all duration-300">
      <!-- Rastgele Lorem Ipsum tarzı başlık -->
      <h2>Rewards for savvy savers</h2>
      <p class="text-base leading-relaxed mb-5">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate eros eu nulla gravida.
      </p>
      <p class="text-sm font-medium mb-6">
        * Additional Info: Discover more details by clicking the button below.
      </p>
      <button class="btn-custom w-64 px-6 py-3 rounded-full shadow transition-all duration-300">
        View Details
      </button>
    </div>

    <!-- Kart 2 -->
    <div class="card p-8 rounded-xl shadow-lg hover:shadow-2xl text-center transition-all duration-300">
      <!-- Rastgele Lorem Ipsum tarzı başlık -->
      <h2>Innovate your smart future</h2>
      <p class="text-base leading-relaxed mb-5">
        Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
      </p>
      <p class="text-sm font-medium mb-6">
        * Additional Info: Discover more details by clicking the button below.
      </p>
      <button class="btn-custom w-64 px-6 py-3 rounded-full shadow transition-all duration-300">
        View Details
      </button>
    </div>

    <!-- Kart 3 -->
    <div class="card p-8 rounded-xl shadow-lg hover:shadow-2xl text-center transition-all duration-300">
      <!-- Rastgele Lorem Ipsum tarzı başlık -->
      <h2>Elevate your daily gains</h2>
      <p class="text-base leading-relaxed mb-5">
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
      </p>
      <p class="text-sm font-medium mb-6">
        * Additional Info: Discover more details by clicking the button below.
      </p>
      <button class="btn-custom w-64 px-6 py-3 rounded-full shadow transition-all duration-300">
        View Details
      </button>
    </div>

  </div>
</div>