Загрузка...
Секция с сеткой карточек недвижимости (3 колонки) на Tailwind CSS. Отображает цены, характеристики и CTA. Идеально для страниц объявлений.
<!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>