<div
  class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 shadow-md shadow-gray-400 dark:shadow-gray-700 rounded-2xl p-4"
>
  <h1 class="text-base font-normal uppercase mb-2">Why is Nuanxa provided for free?</h1>
  <p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">
    Nuanxa is provided for free to ensure that everyone can easily use interactive components based on Tailwind CSS without having to create them from scratch, thus speeding up website development and encouraging community usage.
  </p>
</div>
              

            
<div
  class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 shadow-md shadow-gray-400 dark:shadow-gray-700 rounded-2xl p-4"
>
  <h1 class="text-base font-normal uppercase mb-2">Why is Nuanxa provided for free?</h1>
  <p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed mb-4">
    Nuanxa is provided for free to ensure that everyone can easily use interactive components based on Tailwind CSS without having to create them from scratch, thus speeding up website development and encouraging community usage.
  </p>
  <button
    class="flex items-center gap-2 px-3 py-1.5 text-sm font-semibold rounded-md text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400 transition"
  >
    Read more<i class="fa-solid fa-arrow-right"></i>
  </button>
</div>
              

            
<div
  class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 shadow-md shadow-gray-400 dark:shadow-gray-700 rounded-2xl overflow-hidden"
>
  <img
    src="https://images.unsplash.com/photo-1519681393784-d120267933ba"
    alt="Card Image"
    class="w-full h-44 object-cover"
  />
  <div class="px-4 pb-4 pt-2">
    <h1 class="text-base font-normal uppercase mb-2">
     Why is Nuanxa provided for free?
    </h1>
    <p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed mb-4">
      Nuanxa is provided for free to ensure that everyone can easily use interactive components based on Tailwind CSS without having to create them from scratch, thus speeding up website development and encouraging community usage.
    </p>
    <button
      class="flex items-center gap-2 px-3 py-1.5 text-sm font-semibold rounded-md text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400 transition"
    >
      Read more <i class="fa-solid fa-arrow-right text-xs"></i>
    </button>
  </div>
</div>
              

            
<div
  class="flex flex-row bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 shadow-md shadow-gray-400 dark:shadow-gray-700 rounded-2xl overflow-hidden"
>
  <img
    src="../../assets/img/bg-profile.png"
    alt="Horizontal Card"
    class="w-1/3 object-cover"
  />
  <div class="flex flex-col flex-1 p-3">
    <h1 class="text-base font-normal uppercase mb-2">Why is Nuanxa provided for free?</h1>
    <p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed mb-4">
      Nuanxa is provided for free to ensure that everyone can easily use interactive components based on Tailwind CSS without having to create them from scratch, thus speeding up website development and encouraging community usage.    </p>
    <button
      class="flex items-center gap-2 px-3 py-1.5 text-sm font-semibold rounded-md text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400 transition self-start"
    >
      Read more"<i class="fa-solid fa-arrow-right text-xs"></i>
    </button>
  </div>
</div>
              

            
<div
  class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 shadow-md shadow-gray-400 dark:shadow-gray-700 rounded-2xl overflow-hidden p-4"
>
  <h1 class="text-lg font-semibold text-center">Login</h1>
  <form>
    <!-- Email -->
    <div class="mb-3">
      <label
        for="email"
        class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300"
        >Email</label
      >
      <div class="relative">
        <i
          class="fas fa-envelope absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 dark:text-gray-500"
        ></i>
        <input
          type="email"
          id="email"
          placeholder="Email"
          class="w-full pl-10 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-1 focus:ring-blue-200 focus:border-blue-200"
        />
      </div>
    </div>

    <!-- Password -->
    <div class="mb-3">
      <label
        for="password"
        class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300"
        >Password</label
      >
      <div class="relative">
        <i
          class="fas fa-key absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 dark:text-gray-500"
        ></i>
        <input
          type="password"
          id="password"
          placeholder="Password"
          class="w-full pl-10 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-1 focus:ring-blue-200 focus:border-blue-200"
        />
      </div>
    </div>

    <!-- Remember & Forgot -->
    <div
      class="flex items-center justify-between text-sm text-gray-600 dark:text-gray-400 mb-4"
    >
      <label class="flex items-center gap-2">
        <input
          type="checkbox"
          class="h-4 w-4 rounded border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 focus:ring-2 focus:ring-blue-200 focus:ring-offset-0"
        />
        Remember me
      </label>
      <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline"
        >Forgot password?</a
      >
    </div>

    <!-- Button -->
    <button
      type="submit"
      class="w-full px-3 py-2 mb-2 text-sm font-semibold rounded-lg text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400 transition"
    >
      Login
    </button>

    <!-- Footer -->
    <div class="text-sm text-gray-500 dark:text-gray-400 text-center">
      Not registered?
      <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline"
        >Create account</a
      >
    </div>
  </form>
</div>
              

            
<div
  class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 shadow-md shadow-gray-400 dark:shadow-gray-700 rounded-2xl overflow-hidden p-4"
>
  <div class="space-y-3 flex flex-col items-center text-center p-4">
    <!-- Profile Photo -->
    <img
      src="https://randomuser.me/api/portraits/men/32.jpg"
      alt="John Doe"
      class="w-32 h-32 object-cover rounded-full border-2 border-gray-300 dark:border-gray-500"
    />

    <!-- Info -->
    <div>
      <h1 class="text-lg font-bold text-gray-900 dark:text-gray-100">
        John Doe
      </h1>
      <div class="text-sm font-semibold text-gray-600 dark:text-gray-300">
        Frontend Developer
      </div>
      <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
        Passionate about crafting intuitive user interfaces with React, Vue, and
        Tailwind CSS.
      </p>
    </div>
  </div>

  <!-- Buttons -->
  <div class="flex justify-center gap-3">
    <button
      class="px-3 py-1.5 text-sm font-semibold rounded-md text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400 transition"
    >
      View Profile
    </button>
    <button
      class="px-3 py-1.5 text-sm font-semibold rounded-md border border-gray-500 text-gray-700 hover:bg-gray-600 hover:text-white dark:border-gray-400 dark:text-gray-300 dark:hover:bg-gray-500 dark:hover:text-white transition"
    >
      Send Message
    </button>
  </div>
</div>