All Prompts
All Prompts
herosectiontailwindresponsiveanimateduiniickht40
Property Dashboard Hero with Floating UI
Hero-секция для сайта недвижимости с анимированным UI, статистикой и CTA. Адаптивный дизайн на Tailwind CSS для современной посадочной страницы.
Prompt
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Property.io Dashboard</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,400;0,600;1,400&display=swap"
rel="stylesheet">
<style>
body {
font-family: 'Inter', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.font-serif {
font-family: 'Playfair Display', serif;
}
/* Custom animation for float effect */
@keyframes float {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
100% {
transform: translateY(0px);
}
}
.animate-float {
animation: float 6s ease-in-out infinite both;
}
.animate-float-delayed {
animation: float 7s ease-in-out infinite 1.5s both;
}
.animate-float-slow {
animation: float 8s ease-in-out infinite 0.5s both;
}
</style>
<meta name="disabled-font-classes" content="font-dm-sans">
<link id="all-fonts-link-font-geist" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&display=swap">
<style id="all-fonts-style-font-geist">
.font-geist {
font-family: 'Geist', sans-serif !important;
}
</style>
<link id="all-fonts-link-font-roboto" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap">
<style id="all-fonts-style-font-roboto">
.font-roboto {
font-family: 'Roboto', sans-serif !important;
}
</style>
<link id="all-fonts-link-font-montserrat" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap">
<style id="all-fonts-style-font-montserrat">
.font-montserrat {
font-family: 'Montserrat', sans-serif !important;
}
</style>
<link id="all-fonts-link-font-poppins" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap">
<style id="all-fonts-style-font-poppins">
.font-poppins {
font-family: 'Poppins', sans-serif !important;
}
</style>
<link id="all-fonts-link-font-playfair" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;900&display=swap">
<style id="all-fonts-style-font-playfair">
.font-playfair {
font-family: 'Playfair Display', serif !important;
}
</style>
<link id="all-fonts-link-font-instrument-serif" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Instrument+Serif:wght@400;500;600;700&display=swap">
<style id="all-fonts-style-font-instrument-serif">
.font-instrument-serif {
font-family: 'Instrument Serif', serif !important;
}
</style>
<link id="all-fonts-link-font-merriweather" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700;900&display=swap">
<style id="all-fonts-style-font-merriweather">
.font-merriweather {
font-family: 'Merriweather', serif !important;
}
</style>
<link id="all-fonts-link-font-bricolage" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@300;400;500;600;700&display=swap">
<style id="all-fonts-style-font-bricolage">
.font-bricolage {
font-family: 'Bricolage Grotesque', sans-serif !important;
}
</style>
<link id="all-fonts-link-font-jakarta" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap">
<style id="all-fonts-style-font-jakarta">
.font-jakarta {
font-family: 'Plus Jakarta Sans', sans-serif !important;
}
</style>
<link id="all-fonts-link-font-space-grotesk" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap">
<style id="all-fonts-style-font-space-grotesk">
.font-space-grotesk {
font-family: 'Space Grotesk', sans-serif !important;
}
</style>
<link id="all-fonts-link-font-work-sans" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;500;600;700;800&display=swap">
<style id="all-fonts-style-font-work-sans">
.font-work-sans {
font-family: 'Work Sans', sans-serif !important;
}
</style>
<link id="all-fonts-link-font-pt-serif" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=PT+Serif:wght@400;700&display=swap">
<style id="all-fonts-style-font-pt-serif">
.font-pt-serif {
font-family: 'PT Serif', serif !important;
}
</style>
<link id="all-fonts-link-font-geist-mono" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@300;400;500;600;700&display=swap">
<style id="all-fonts-style-font-geist-mono">
.font-geist-mono {
font-family: 'Geist Mono', monospace !important;
}
</style>
<link id="all-fonts-link-font-space-mono" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap">
<style id="all-fonts-style-font-space-mono">
.font-space-mono {
font-family: 'Space Mono', monospace !important;
}
</style>
<link id="all-fonts-link-font-quicksand" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap">
<style id="all-fonts-style-font-quicksand">
.font-quicksand {
font-family: 'Quicksand', sans-serif !important;
}
</style>
<link id="all-fonts-link-font-nunito" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700;800&display=swap">
<style id="all-fonts-style-font-nunito">
.font-nunito {
font-family: 'Nunito', sans-serif !important;
}
</style>
<link id="all-fonts-link-font-newsreader" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400..800&display=swap">
<style id="all-fonts-style-font-newsreader">
.font-newsreader {
font-family: 'Newsreader', serif !important;
}
</style>
<link id="all-fonts-link-font-google-sans-flex" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Google+Sans+Flex:wght@400;500;600;700&display=swap">
<style id="all-fonts-style-font-google-sans-flex">
.font-google-sans-flex {
font-family: 'Google Sans Flex', sans-serif !important;
}
</style>
<link id="all-fonts-link-font-oswald" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&display=swap">
<style id="all-fonts-style-font-oswald">
.font-oswald {
font-family: 'Oswald', sans-serif !important;
}
</style>
<link id="all-fonts-link-font-cormorant" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&display=swap">
<style id="all-fonts-style-font-cormorant">
.font-cormorant {
font-family: 'Cormorant Garamond', serif !important;
}
</style>
<link id="all-fonts-link-font-ibm-sans" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap">
<style id="all-fonts-style-font-ibm-sans">
.font-ibm-sans {
font-family: 'IBM Plex Sans', sans-serif !important;
}
</style>
<link id="all-fonts-link-font-inter" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap">
<style id="all-fonts-style-font-inter">
.font-inter {
font-family: 'Inter', sans-serif !important;
}
</style>
<link id="all-fonts-link-font-manrope" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap">
<style id="all-fonts-style-font-manrope">
.font-manrope {
font-family: 'Manrope', sans-serif !important;
}
</style>
</head>
<body class="overflow-x-hidden bg-black text-neutral-100">
<!-- Navbar -->
<nav
class="fixed top-0 left-0 w-full z-50 backdrop-blur-md border-b border-transparent transition-all duration-300 bg-black/80">
<div class="md:px-12 flex h-24 max-w-[1600px] mr-auto ml-auto pr-6 pl-6 items-center justify-between">
<!-- Logo -->
<div class="flex items-center gap-3 group cursor-pointer">
<div class="flex overflow-hidden w-8 h-8 relative items-center justify-center">
<div class="bg-gradient-to-br w-4 h-8 rounded-l-full from-sky-600 to-sky-400"></div>
</div>
<span class="group-hover:text-neutral-600 transition-colors text-sm font-semibold tracking-tighter font-sans text-neutral-100">/ hello@drivex.io</span>
</div>
<!-- Nav Links -->
<div class="hidden md:flex items-center gap-10">
<a href="#"
class="hover:text-neutral-500 transition-colors text-sm font-medium font-sans text-neutral-100">API</a>
<a href="#"
class="text-sm font-medium hover:text-neutral-500 transition-colors font-sans text-neutral-100">Location</a>
<a href="#"
class="hover:text-neutral-500 transition-colors text-sm font-medium font-sans text-neutral-100">Agent</a>
<a href="#"
class="text-sm font-medium hover:text-neutral-500 transition-colors font-sans text-neutral-100">Features</a>
</div>
<!-- Auth -->
<div class="flex items-center gap-8">
<a href="#"
class="hidden md:block hover:text-neutral-500 transition-colors text-sm font-medium font-sans text-neutral-100">Login</a>
<button class="transition-colors text-sm font-medium rounded-none pt-3 pr-8 pb-3 pl-8 font-sans hover:bg-neutral-200 text-black bg-neutral-50">
Register
</button>
</div>
</div>
</nav>
<section
class="lg:pt-40 lg:pb-32 min-h-screen flex overflow-hidden w-full pt-32 pb-24 relative items-center bg-black">
<!-- Vertical Guidelines Background -->
<div class="absolute inset-0 w-full max-w-[1600px] mx-auto px-6 md:px-12 pointer-events-none z-0 opacity-40">
<div class="grid grid-cols-6 md:grid-cols-12 h-full w-full">
<div class="border-r border-dashed h-full border-neutral-800"></div>
<div class="border-r border-dashed h-full hidden md:block border-neutral-800"></div>
<div class="border-r border-dashed h-full border-neutral-800"></div>
<div class="border-r border-dashed h-full hidden md:block border-neutral-800"></div>
<div class="border-r border-dashed h-full border-neutral-800"></div>
<div class="border-r border-dashed h-full hidden md:block border-neutral-800"></div>
<div class="border-r border-dashed h-full border-neutral-800"></div>
<div class="border-r border-dashed h-full hidden md:block border-neutral-800"></div>
<div class="border-r border-dashed h-full border-neutral-800"></div>
<div class="border-r border-dashed h-full hidden md:block border-neutral-800"></div>
<div class="border-r border-dashed h-full border-neutral-800"></div>
<div class="border-r border-dashed h-full hidden md:block border-neutral-800"></div>
</div>
</div>
<div class="relative z-10 max-w-[1600px] mx-auto px-6 md:px-12 w-full">
<div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
<!-- Left Content -->
<div class="lg:col-span-5 flex flex-col items-start relative z-20">
<!-- Review Box -->
<div class="flex items-start gap-4 mb-10">
<div class="w-12 h-12 flex items-center justify-center rounded-lg bg-neutral-900 text-neutral-100">
<iconify-icon icon="solar:star-bold-duotone" width="24" class="" height="24"
style="color: rgb(2, 132, 199);"></iconify-icon>
</div>
<div class="flex flex-col">
<span class="text-sm font-semibold font-sans text-neutral-100">4.3 Stars</span>
<a href="#"
class="text-sm text-neutral-500 underline underline-offset-4 transition-colors font-sans decoration-neutral-700 hover:text-neutral-100">Read
Our Success Stories</a>
</div>
</div>
<h1
class="text-6xl lg:text-[5.5rem] leading-[0.95] mb-8 relative font-sans tracking-tighter font-light text-neutral-100">
Open
<span class="relative inline-block z-10 font-sans tracking-tighter font-light">
Door
<!-- Circle Scribble -->
<svg class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-[45%] w-[140%] h-[150%] pointer-events-none z-[-1] text-neutral-100" viewBox="0 0 200 120" fill="none" preserveAspectRatio="none">
<path d="M20,60 Q30,10 100,10 T180,60 T100,110 T20,60" vector-effect="non-scaling-stroke" stroke="currentColor" stroke-width="3" stroke-linecap="round"></path>
</svg>
</span>
<span class="inline-block mt-2 relative font-sans tracking-tighter font-light">
Corporate Tower
<span class="absolute -bottom-2 left-0 w-full h-[3px] bg-neutral-100"></span>
</span>
</h1>
<p
class="lg:text-3xl leading-snug text-2xl max-w-lg mb-12 font-sans tracking-tighter font-light text-neutral-400">
“Join us. We'll help you every — step of the way.”
</p>
<button class="transition-all text-sm font-medium mb-16 pt-4 pr-10 pb-4 pl-10 shadow-xl font-sans hover:bg-neutral-200 shadow-neutral-100/10 text-black bg-neutral-50">
Get Started
</button>
<!-- Stats -->
<div class="flex items-center gap-16">
<div class="">
<p class="text-3xl mb-1 font-sans tracking-tighter font-light text-neutral-100">2k +</p>
<p class="text-sm font-medium text-neutral-500 font-sans">Copt Towers</p>
</div>
<div class="">
<p class="text-3xl mb-1 font-sans tracking-tighter font-light text-neutral-100">8M +</p>
<p class="text-sm font-medium text-neutral-500 font-sans">Offices Shifted</p>
</div>
</div>
</div>
<!-- Right Visual Content -->
<div class="lg:col-span-7 flex w-full h-[700px] relative items-center justify-center">
<!-- Main Circle Background -->
<div class="lg:mr-16 w-[600px] h-[600px] rounded-full absolute bg-neutral-800/50"></div>
<!-- Floating Building Icon (Left) -->
<div
class="absolute left-[10%] top-[25%] w-16 h-16 rounded-2xl shadow-xl flex items-center justify-center z-20 animate-float-delayed bg-black text-neutral-100">
<iconify-icon icon="solar:city-bold-duotone" width="32" class="" height="32"
style="color: rgb(217, 119, 6);"></iconify-icon>
</div>
<!-- Main Phone UI Card -->
<div
class="transform hover:rotate-0 transition-all duration-700 animate-float z-30 w-[340px] rounded-[2.5rem] pt-6 pr-6 pb-6 pl-6 relative shadow-2xl -rotate-2 bg-neutral-50">
<!-- Phone Header -->
<div class="flex items-center justify-between mb-8 text-black/80">
<div class="flex gap-2 gap-x-2 gap-y-2 items-center">
<div class="w-2 h-2 rounded-full bg-black/20"></div>
<span class="text-xs font-medium tracking-wide font-sans">ATS Devine</span>
</div>
<div class="flex items-center gap-4">
<iconify-icon icon="solar:magnifer-linear" width="16" class="" height="16"
style="color: rgb(3, 7, 18);"></iconify-icon>
<iconify-icon icon="solar:hamburger-menu-linear" width="16"></iconify-icon>
</div>
</div>
<!-- Balance -->
<div class="mb-8">
<p class="text-xs mb-1 font-sans text-black/40">Monthly</p>
<div class="flex items-center gap-3">
<h3 class="text-4xl font-sans tracking-tighter font-light text-black">$24,000</h3>
</div>
<div class="inline-flex items-center gap-1 mt-3 px-2 py-1 rounded-md bg-black">
<span class="text-[10px] font-bold font-sans text-neutral-100">38-40 %</span>
<iconify-icon icon="solar:arrow-right-up-linear" width="10" class="text-neutral-100"></iconify-icon>
</div>
</div>
<!-- Bar Chart Representation -->
<div class="flex items-end justify-between h-24 mb-8 px-1 gap-2">
<div class="w-full rounded-t-sm h-[40%] bg-neutral-200"></div>
<div class="w-full rounded-t-sm h-[60%] bg-neutral-200"></div>
<div class="w-full rounded-t-sm h-[30%] bg-neutral-200"></div>
<div class="w-full rounded-t-sm h-[80%] relative shadow-[0_0_15px_rgba(255,255,255,0.3)] bg-black">
<div class="absolute -top-6 left-1/2 -translate-x-1/2 w-2 h-2 rounded-full bg-black"></div>
</div>
<div class="w-full rounded-t-sm h-[50%] bg-neutral-200"></div>
</div>
<div class="flex justify-between text-[10px] text-neutral-500 px-1 mb-8">
<span class="font-sans">Jan</span><span class="font-sans">Feb</span><span class="font-sans">Ma</span><span class="font-sans">Apr</span><span class="font-sans">Ma</span>
</div>
<!-- Bottom Stats Cards -->
<div class="grid grid-cols-2 gap-3">
<div class="p-4 rounded-2xl bg-neutral-200/50">
<div class="w-8 h-8 rounded-full flex items-center justify-center mb-3 bg-black">
<iconify-icon icon="solar:pie-chart-2-bold-duotone" class="text-neutral-100"
width="16"></iconify-icon>
</div>
<p class="text-2xl mb-1 font-sans tracking-tighter font-light text-black">$29M</p>
<p class="text-[10px] leading-tight font-sans text-black/40">YearlyTurnover</p>
</div>
<div class="p-4 rounded-2xl bg-neutral-200/50">
<div class="w-8 h-8 rounded-full flex items-center justify-center mb-3 bg-neutral-300">
<iconify-icon icon="solar:graph-up-bold-duotone" class="text-black" width="16"></iconify-icon>
</div>
<p class="text-2xl mb-1 font-sans tracking-tighter font-light text-black">$1.4M</p>
<p class="text-[10px] leading-tight font-sans text-black/40">LastMonth</p>
</div>
</div>
</div>
<!-- Floating Transaction Card (Right) -->
<div
class="absolute -right-4 lg:right-0 top-[35%] w-72 p-5 rounded-2xl shadow-2xl z-40 animate-float-slow border bg-black shadow-neutral-800/50 border-neutral-900">
<div class="flex items-center justify-between mb-2">
<div class="w-10 h-10 rounded-xl flex items-center justify-center bg-neutral-900 text-neutral-100">
<iconify-icon icon="solar:dollar-bold-duotone" width="24" class="" height="24"
style="color: rgb(217, 119, 6);"></iconify-icon>
</div>
<button class="w-8 h-8 rounded-full flex items-center justify-center bg-neutral-50 text-black">
<iconify-icon icon="solar:alt-arrow-up-linear" width="16" class="rotate-45" height="16" style="color: radial-gradient(circle_at_center,var(--tw-gradient-stops));"></iconify-icon>
</button>
</div>
<p class="text-xs font-medium mb-1 font-sans text-neutral-600">Successful Credited</p>
<h4 class="text-2xl mb-6 font-sans tracking-tighter font-light text-neutral-100">$98,460</h4>
<div class="flex justify-between items-center text-center border-t pt-4 border-neutral-900">
<div>
<p class="text-[10px] font-medium mb-1 font-sans text-neutral-600">Paypal</p>
<p class="text-xs font-bold font-sans text-neutral-100">28,000</p>
</div>
<div>
<p class="text-[10px] font-medium mb-1 font-sans text-neutral-600">Bank Ac</p>
<p class="text-xs font-bold font-sans text-neutral-100">50,000</p>
</div>
<div>
<p class="text-[10px] font-medium mb-1 font-sans text-neutral-600">Cheque</p>
<p class="text-xs font-bold font-sans text-neutral-100">28,460</p>
</div>
</div>
</div>
<!-- Bottom Floating Bar -->
<div
class="absolute bottom-[10%] left-[10%] lg:left-[20%] py-3 px-5 rounded-full shadow-2xl z-40 flex items-center gap-6 border animate-float bg-black shadow-neutral-800/50 border-neutral-900">
<div class="flex items-center gap-2 border-r pr-4 border-neutral-900">
<iconify-icon icon="solar:notification-unread-bold-duotone" class="text-neutral-100" width="20"
height="20" style="color: rgb(5, 150, 105);"></iconify-icon>
<div class="flex items-center gap-1 text-xs font-bold font-sans text-neutral-100">
EN <iconify-icon icon="solar:alt-arrow-down-bold" width="10"></iconify-icon>
</div>
</div>
<div class="flex items-center gap-3">
<div class="text-right">
<p class="text-xs font-bold font-sans text-neutral-100">James Edward</p>
<p class="text-[10px] font-medium font-sans text-neutral-600">Super Admin</p>
</div>
<div class="w-10 h-10 rounded-full overflow-hidden relative group cursor-pointer bg-neutral-900">
<img src="https://i.pravatar.cc/150?img=11" alt="Admin" class="w-full h-full object-cover">
<div
class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity bg-white/10">
<iconify-icon icon="solar:arrow-up-linear" class="rotate-45 text-black"></iconify-icon>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Side Number Pagination (Right Edge) -->
<div
class="hidden 2xl:flex absolute right-0 top-1/2 -translate-y-1/2 flex-col items-center gap-4 text-xs font-medium text-neutral-100">
<span class="-rotate-90 font-sans">05</span>
<div class="h-24 w-px bg-neutral-100"></div>
<span class="-rotate-90 font-sans">03</span>
</div>
</div>
</section>
</body>
</html>