VibeCoderzVibeCoderz
Telegram
All Prompts
Real Estate Residence Cards Grid Section preview
featuresectiontailwindgridreal-estateresponsivelisting

Real Estate Residence Cards Grid Section

Секция с сеткой карточек недвижимости (3 колонки) на Tailwind CSS. Отображает цены, характеристики и CTA. Идеально для страниц объявлений.

Live Preview

Prompt

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>NOVERA — Residence Cards</title>

  <script src="https://cdn.tailwindcss.com"></script>

  <style>
    body {
      background-color: #f9f8f6;
      color: #1c1917;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    .card-img {
      transition: transform 400ms ease-out, filter 400ms ease-out;
    }

    .card:hover .card-img {
      transform: scale(1.05);
      filter: brightness(0.9);
    }

    .card:hover {
      transform: translateY(-4px);
    }

    .card {
      transition: transform 300ms ease;
    }
  </style>
</head>

<body class="font-sans font-light text-primary">

  <section class="py-24 md:py-32 px-6 md:px-12">
    <div class="max-w-[1400px] mx-auto">

      <!-- Cards Grid -->
      <div class="grid grid-cols-1 md:grid-cols-3 gap-x-8 gap-y-20">

        <!-- Card 1 -->
        <div class="card flex flex-col h-full cursor-pointer">

          <div class="aspect-[4/5] w-full mb-6 overflow-hidden rounded-[2px] border border-black/10 relative shadow-sm">
            <img
            src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/056a7e6c-374e-4920-a376-7043eb2dcc00_1600w.jpg"
            class="card-img w-full h-full object-cover"
          />
            <span class="absolute bottom-4 left-4 text-[10px] uppercase tracking-widest text-white border-b border-white/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
            View Residence
          </span>
          </div>

          <div class="flex justify-between items-baseline mb-2">
            <h4 class="font-serif text-2xl font-light tracking-tight">The Arcott</h4>
            <span class="text-sm font-medium">$3,450<span class="text-xs text-black/60 ml-1">/mo</span></span>
          </div>

          <div class="flex items-center gap-3 text-xs text-black/70 mb-3">
            <span>950 SQ FT</span>
            <span>•</span>
            <span>2 Bed</span>
            <span>•</span>
            <span>2 Bath</span>
          </div>

          <p class="text-[10px] text-black/60 border-t border-black/10 pt-3">
            South-facing with floor-to-ceiling glazing.
          </p>

        </div>

        <!-- Card 2 -->
        <div class="card flex flex-col h-full cursor-pointer md:translate-y-5">

          <div class="aspect-[4/5] w-full mb-6 overflow-hidden rounded-[2px] border border-black/10 relative shadow-sm">
            <img
            src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/c22291f6-a511-4d6f-9f6c-97caf79cf402_1600w.jpg"
            class="card-img w-full h-full object-cover"
          />
          </div>

          <div class="flex justify-between items-baseline mb-2">
            <h4 class="font-serif text-2xl font-light tracking-tight">Vantage Point</h4>
            <span class="text-sm font-medium">$2,800<span class="text-xs text-black/60 ml-1">/mo</span></span>
          </div>

          <div class="flex items-center gap-3 text-xs text-black/70 mb-3">
            <span>780 SQ FT</span>
            <span>•</span>
            <span>1 Bed</span>
            <span>•</span>
            <span>1 Bath</span>
          </div>

          <p class="text-[10px] text-black/60 border-t border-black/10 pt-3">
            Open-concept loft with exposed concrete.
          </p>

        </div>

        <!-- Card 3 -->
        <div class="card flex flex-col h-full cursor-pointer">

          <div class="aspect-[3/4] w-full mb-6 overflow-hidden rounded-[2px] border border-black/10 relative shadow-sm">
            <img
            src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/b9fef1af-7076-41f8-94ac-87cf3a20563d_1600w.jpg"
            class="card-img w-full h-full object-cover"
          />
          </div>

          <div class="flex justify-between items-baseline mb-2">
            <h4 class="font-serif text-2xl font-light tracking-tight">The Elysian</h4>
            <span class="text-sm font-medium">$5,200<span class="text-xs text-black/60 ml-1">/mo</span></span>
          </div>

          <div class="flex items-center gap-3 text-xs text-black/70 mb-3">
            <span>1,600 SQ FT</span>
            <span>•</span>
            <span>2 Bed</span>
            <span>•</span>
            <span>2.5 Bath</span>
          </div>

          <p class="text-[10px] text-black/60 border-t border-black/10 pt-3">
            Corner unit with dual-aspect views.
          </p>

        </div>

      </div>

      <!-- Bottom Button -->
      <div class="flex justify-center mt-20">
        <a href="#"
          class="inline-block text-[10px] uppercase tracking-widest border border-black/40 px-10 py-4 rounded-[2px] hover:bg-black hover:text-white transition-all duration-300 font-medium">
          Browse All Available Residences
        </a>
      </div>

    </div>
  </section>

</body>

</html>
All Prompts