All Prompts
All Prompts
featuresectiontailwindresponsiveanimatedfintechchart
Real-Time Market Data Feature Showcase Section
Анимированная секция-витрина с живыми рыночными данными. Идеально для финтех-лендингов: демонстрация чартов, списков наблюдения, характеристик.
Prompt
<section class="relative z-10 animate-[fadeInUp_1s_ease-out_1.2s_forwards]" style="transform: translateY(0px);">
<div class="max-w-7xl mr-auto ml-auto pt-16 pr-6 pb-16 pl-6">
<div class="grid gap-12 lg:grid-cols-2">
<!-- Diagram -->
<div
class="relative bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/ac30327e-f74e-4f00-871e-19b69c6e0feb_1600w.jpg)] bg-cover rounded-[36px] pt-5 pr-5 pb-5 pl-5">
<article
class="group relative overflow-hidden transition-shadow hover:shadow-md bg-neutral-900/70 border-neutral-700 border rounded-3xl shadow-xl backdrop-blur-xl"
style="background: rgba(17, 17, 17, 0.7); backdrop-filter: blur(20px); border: 1px solid rgba(64, 64, 64, 0.35);">
<div class="sm:p-10 pt-6 pr-6 pb-6 pl-6">
<div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-6">
<h3 class="text-2xl font-semibold tracking-tight text-white">Real‑Time Market Data</h3>
<span class="inline-flex items-center gap-2 text-[10px] sm:text-xs text-neutral-300 bg-white/5 border border-white/10 rounded-full px-2.5 py-1">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-green-400">
<path d="M16 7h6v6" class=""></path>
<path d="m22 7-8.5 8.5-5-5L2 17" class=""></path>
</svg>
Live streaming
</span>
</div>
<!-- Illustration -->
<div
class="relative h-56 sm:h-64 rounded-2xl bg-gradient-to-b from-neutral-900 to-neutral-800 ring-1 ring-inset ring-white/5 mb-8">
<!-- Main trading chart -->
<div
class="absolute right-3 sm:right-6 top-4 sm:top-6 w-[78%] h-[68%] rounded-2xl bg-neutral-900/90 backdrop-blur border border-neutral-800 shadow-sm">
<div class="flex items-center justify-between px-3 py-2 border-b border-neutral-800/70">
<span class="text-[10px] sm:text-xs tracking-widest text-neutral-400">AAPL</span>
<div class="flex items-center gap-2">
<span class="text-xs text-green-400">+2.34%</span>
<span class="h-2 w-12 rounded bg-green-500/20"></span>
</div>
</div>
<div class="p-2">
<svg viewBox="0 0 300 90" class="w-full h-20 sm:h-24 text-neutral-700">
<defs class="">
<pattern id="dots1" x="0" y="0" width="4" height="4" patternUnits="userSpaceOnUse" class="">
<circle cx="1" cy="1" r="0.5" fill="currentColor" opacity="0.3" class=""></circle>
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#dots1)" class=""></rect>
<!-- Candlestick-style bars -->
<rect x="20" y="45" width="3" height="20" fill="#EF4444" class=""></rect>
<rect x="40" y="35" width="3" height="25" fill="#10B981" class=""></rect>
<rect x="60" y="50" width="3" height="15" fill="#EF4444" class=""></rect>
<rect x="80" y="30" width="3" height="30" fill="#10B981" class=""></rect>
<rect x="100" y="40" width="3" height="20" fill="#10B981" class=""></rect>
<rect x="120" y="25" width="3" height="35" fill="#10B981" class=""></rect>
<rect x="140" y="45" width="3" height="18" fill="#EF4444" class=""></rect>
<rect x="160" y="20" width="3" height="40" fill="#10B981" class=""></rect>
<rect x="180" y="35" width="3" height="25" fill="#10B981" class=""></rect>
<rect x="200" y="15" width="3" height="45" fill="#10B981" class=""></rect>
<polyline points="22,55 42,47 62,57 82,45 102,50 122,42 142,54 162,40 182,47 202,37" fill="none"
stroke="#10B981" stroke-width="1.5" stroke-linecap="round" class=""></polyline>
</svg>
</div>
</div>
<!-- Watchlist -->
<div
class="absolute left-6 sm:left-12 bottom-10 sm:bottom-12 w-[62%] h-[52%] rounded-2xl bg-neutral-900/90 backdrop-blur border border-neutral-800 shadow-sm">
<div class="flex items-center justify-between px-3 py-2 border-b border-neutral-800/70">
<span class="text-[10px] sm:text-xs tracking-widest text-neutral-400">WATCHLIST</span>
</div>
<div class="p-2 space-y-1">
<div class="flex items-center justify-between text-xs">
<span class="text-neutral-300">TSLA</span>
<span class="text-green-400">+1.2%</span>
</div>
<div class="flex items-center justify-between text-xs">
<span class="text-neutral-300">MSFT</span>
<span class="text-red-400">-0.5%</span>
</div>
<div class="flex items-center justify-between text-xs">
<span class="text-neutral-300">GOOGL</span>
<span class="text-green-400">+0.8%</span>
</div>
</div>
</div>
<!-- Mobile view -->
<div
class="absolute left-3 sm:left-6 bottom-3 sm:bottom-4 w-[38%] h-[44%] rounded-2xl bg-neutral-900/90 backdrop-blur border border-neutral-800 shadow-sm">
<div class="flex items-center justify-between px-3 py-2 border-b border-neutral-800/70">
<span class="text-[10px] sm:text-xs tracking-widest text-neutral-400">MOBILE</span>
</div>
<div class="p-2">
<svg viewBox="0 0 180 70" class="w-full h-14 sm:h-16 text-neutral-700">
<rect x="10" y="35" width="2" height="12" fill="#10B981" class=""></rect>
<rect x="25" y="30" width="2" height="17" fill="#10B981" class=""></rect>
<rect x="40" y="40" width="2" height="10" fill="#EF4444" class=""></rect>
<rect x="55" y="25" width="2" height="22" fill="#10B981" class=""></rect>
<rect x="70" y="20" width="2" height="27" fill="#10B981" class=""></rect>
<rect x="85" y="35" width="2" height="12" fill="#EF4444" class=""></rect>
<rect x="100" y="15" width="2" height="32" fill="#10B981" class=""></rect>
<rect x="115" y="28" width="2" height="19" fill="#10B981" class=""></rect>
<rect x="130" y="12" width="2" height="35" fill="#10B981" class=""></rect>
<polyline points="11,41 26,38 41,45 56,36 71,33 86,41 101,31 116,36 131,29" fill="none"
stroke="#10B981" stroke-width="1" stroke-linecap="round" class=""></polyline>
</svg>
</div>
</div>
</div>
<!-- Features grid -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
<div class="">
<h4 class="text-lg font-semibold tracking-tight text-white">Advanced Charting</h4>
<p class="mt-2 text-sm text-neutral-400">Professional-grade technical analysis tools with real-time
candlestick patterns.</p>
</div>
<div class="">
<h4 class="text-lg font-semibold tracking-tight text-white">Smart Watchlists</h4>
<p class="mt-2 text-sm text-neutral-400">Curated stock tracking with instant performance updates and
alerts.</p>
</div>
</div>
<!-- CTA -->
<div class="">
<a href="#"
class="inline-flex items-center gap-2 text-xs font-medium text-neutral-100 hover:text-neutral-300">
Start trading
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
class="h-4 w-4">
<path d="M5 12h14" class=""></path>
<path d="m12 5 7 7-7 7" class=""></path>
</svg>
</a>
</div>
</div>
</article>
</div>
<!-- Copy & stats -->
<div class="">
<div class="tech-content" id="technology">
<h3 class="sm:text-5xl transition-colors duration-500 text-4xl font-semibold text-slate-900 tracking-tight">
Industry‑leading precision, professionally certified</h3>
<!-- Additional technology details -->
<div class="mt-8">
<div class="border-t border-neutral-200 pt-6">
<h4 class="text-lg font-semibold text-slate-900 mb-4">Core Technology Features</h4>
<div class="space-y-4">
<div class="flex items-start gap-3">
<div class="flex-shrink-0 w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mt-0.5">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
class="text-blue-600">
<circle cx="12" cy="12" r="10" class=""></circle>
<path d="M12 6v6l4 2" class=""></path>
</svg>
</div>
<div class="">
<h5 class="font-medium text-slate-900">Real-time Processing</h5>
<p class="text-sm text-slate-600 mt-1">Sub-second color analysis with continuous calibration and
temperature compensation for consistent results.</p>
</div>
</div>
<div class="flex items-start gap-3">
<div class="flex-shrink-0 w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mt-0.5">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
class="text-blue-600">
<path
d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"
class=""></path>
<polyline points="3.27,6.96 12,12.01 20.73,6.96" class=""></polyline>
<line x1="12" y1="22.08" x2="12" y2="12" class=""></line>
</svg>
</div>
<div class="">
<h5 class="font-medium text-slate-900">Advanced Algorithms</h5>
<p class="text-sm text-slate-600 mt-1">Machine learning-enhanced color matching with proprietary
spectral analysis for superior accuracy.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tech-content hidden" id="specs">
<h3 class="text-4xl tracking-tight text-slate-900 sm:text-5xl font-sans font-semibold">Technical
Specifications</h3>
<p class="mt-4 text-slate-700 font-sans">Precision engineered with cutting-edge hardware and software
integration for professional color analysis workflows.</p>
<div class="mt-8 border-t border-neutral-200 pt-6">
<h4 class="text-lg font-semibold text-slate-900 mb-4">Hardware Specifications</h4>
<div class="space-y-3">
<div class="flex justify-between py-2 border-b border-neutral-200">
<span class="text-sm text-slate-600 font-sans">Spectral Range</span>
<span class="text-sm text-slate-900 font-sans">380-780 nm</span>
</div>
<div class="flex justify-between py-2 border-b border-neutral-200">
<span class="text-sm text-slate-600 font-sans">Accuracy</span>
<span class="text-sm text-slate-900 font-sans">±0.03 ΔE*ab</span>
</div>
<div class="flex justify-between py-2 border-b border-neutral-200">
<span class="text-sm text-slate-600 font-sans">Measurement Time</span>
<span class="text-sm text-slate-900 font-sans">0.5 seconds</span>
</div>
<div class="flex justify-between py-2 border-b border-neutral-200">
<span class="text-sm text-slate-600 font-sans">Illumination</span>
<span class="text-sm text-slate-900 font-sans">LED D65/A/C/D50/D55/F2/F7/F11</span>
</div>
<div class="flex justify-between py-2 border-b border-neutral-200">
<span class="text-sm text-slate-600 font-sans">Observer Angle</span>
<span class="text-sm text-slate-900 font-sans">2°/10° standard observer</span>
</div>
<div class="flex justify-between py-2 border-b border-neutral-200">
<span class="text-sm text-slate-600 font-sans">Repeatability</span>
<span class="text-sm text-slate-900 font-sans">ΔE*ab ≤ 0.04 (σ)</span>
</div>
</div>
</div>
<div class="mt-8 border-t border-neutral-200 pt-6">
<h4 class="text-lg font-semibold text-slate-900 mb-4">Connectivity & Power</h4>
<div class="space-y-3">
<div class="flex justify-between py-2 border-b border-neutral-200">
<span class="text-sm text-slate-600 font-sans">Interface</span>
<span class="text-sm text-slate-900 font-sans">USB-C 3.0, Bluetooth 5.2, Wi-Fi 6</span>
</div>
<div class="flex justify-between py-2 border-b border-neutral-200">
<span class="text-sm text-slate-600 font-sans">Battery Life</span>
<span class="text-sm text-slate-900 font-sans">8 hours continuous use</span>
</div>
<div class="flex justify-between py-2 border-b border-neutral-200">
<span class="text-sm text-slate-600 font-sans">Operating Temperature</span>
<span class="text-sm text-slate-900 font-sans">0°C to 40°C (32°F to 104°F)</span>
</div>
<div class="flex justify-between py-2 border-b border-neutral-200">
<span class="text-sm text-slate-600 font-sans">Dimensions</span>
<span class="text-sm text-slate-900 font-sans">95 × 65 × 28 mm</span>
</div>
<div class="flex justify-between py-2">
<span class="text-sm text-slate-600 font-sans">Weight</span>
<span class="text-sm text-slate-900 font-sans">280g (9.9 oz)</span>
</div>
</div>
</div>
</div>
<div class="tech-content hidden" id="certifications">
<h3 class="text-4xl tracking-tight text-slate-900 sm:text-5xl font-sans font-semibold">Certifications &
Standards</h3>
<p class="mt-4 text-slate-700 font-sans">Meets and exceeds international standards for color measurement and
professional certification requirements.</p>
<div class="mt-8 border-t border-neutral-200 pt-6">
<h4 class="text-lg font-semibold text-slate-900 mb-4">International Standards</h4>
<div class="grid gap-3 sm:grid-cols-2">
<div class="rounded-lg bg-neutral-50 p-3 ring-1 ring-neutral-200 shadow-sm">
<div class="text-sm font-medium text-slate-900 font-sans">ISO 11664</div>
<div class="text-xs text-slate-600 font-sans">Colorimetry Standards</div>
</div>
<div class="rounded-lg bg-neutral-50 p-3 ring-1 ring-neutral-200 shadow-sm">
<div class="text-sm font-medium text-slate-900 font-sans">CIE Standard</div>
<div class="text-xs text-slate-600 font-sans">Illuminant D65</div>
</div>
<div class="rounded-lg bg-neutral-50 p-3 ring-1 ring-neutral-200 shadow-sm">
<div class="text-sm font-medium text-slate-900 font-sans">ASTM E308</div>
<div class="text-xs text-slate-600 font-sans">Standard Practice for Computing Colors</div>
</div>
<div class="rounded-lg bg-neutral-50 p-3 ring-1 ring-neutral-200 shadow-sm">
<div class="text-sm font-medium text-slate-900 font-sans">DIN 5033</div>
<div class="text-xs text-slate-600 font-sans">Colorimetry Guidelines</div>
</div>
</div>
</div>
<div class="mt-8 border-t border-neutral-200 pt-6">
<h4 class="text-lg font-semibold text-slate-900 mb-4">Industry Certifications</h4>
<div class="grid gap-3 sm:grid-cols-2">
<div class="rounded-lg bg-neutral-50 p-3 ring-1 ring-neutral-200 shadow-sm">
<div class="flex items-center gap-2 mb-2">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
class="text-green-600">
<path d="m9 12 2 2 4-4" class=""></path>
<path d="m21 12c-1 0-3-1-3-3s2-3 3-3 3 1 3 3-2 3-3 3" class=""></path>
<path d="m3 12c1 0 3-1 3-3s-2-3-3-3-3 1-3 3 2 3 3 3" class=""></path>
</svg>
<div class="text-sm font-medium text-slate-900 font-sans">FDA Approved</div>
</div>
<div class="text-xs text-slate-600 font-sans">Medical device classification for clinical use</div>
</div>
<div class="rounded-lg bg-neutral-50 p-3 ring-1 ring-neutral-200 shadow-sm">
<div class="flex items-center gap-2 mb-2">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
class="text-blue-600">
<path
d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"
class=""></path>
<path d="m9 12 2 2 4-4" class=""></path>
</svg>
<div class="text-sm font-medium text-slate-900 font-sans">CE Marking</div>
</div>
<div class="text-xs text-slate-600 font-sans">European conformity for commercial distribution</div>
</div>
<div class="rounded-lg bg-neutral-50 p-3 ring-1 ring-neutral-200 shadow-sm">
<div class="flex items-center gap-2 mb-2">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
class="text-purple-600">
<path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z" class=""></path>
<path d="M3 6h18" class=""></path>
<path d="M16 10a4 4 0 0 1-8 0" class=""></path>
</svg>
<div class="text-sm font-medium text-slate-900 font-sans">NIST Traceable</div>
</div>
<div class="text-xs text-slate-600 font-sans">Calibration standards traceable to national institute
</div>
</div>
<div class="rounded-lg bg-neutral-50 p-3 ring-1 ring-neutral-200 shadow-sm">
<div class="flex items-center gap-2 mb-2">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
class="text-orange-600">
<path d="M12 2v20" class=""></path>
<path d="M8 5H4a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h4" class=""></path>
<path d="M16 5h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-4" class=""></path>
</svg>
<div class="text-sm font-medium text-slate-900 font-sans">RoHS Compliant</div>
</div>
<div class="text-xs text-slate-600 font-sans">Restriction of hazardous substances directive</div>
</div>
</div>
</div>
</div>
<div class="border-t border-neutral-200 pt-6 mt-8">
<div class="grid gap-6 sm:grid-cols-2">
<div class="flex gap-3 hover:scale-105 transition-transform duration-200 cursor-pointer items-center">
<div class="">
<div class="flex items-baseline gap-2">
<span class="text-2xl tracking-tight font-sans font-semibold rating-number text-slate-900" data-target="4.8">4.8</span>
<span class="text-sm text-slate-600 font-sans">/5</span>
</div>
<p class="text-xs text-slate-600 font-sans">22k+ professional reviews</p>
</div>
</div>
<div class="flex items-center gap-3 hover:scale-105 transition-transform duration-200 cursor-pointer">
<div class="">
<div class="flex items-baseline gap-2">
<span class="text-2xl tracking-tight font-sans font-semibold rating-number text-slate-900" data-target="94">94%</span>
</div>
<p class="text-xs text-slate-600 font-sans">Users recommend to colleagues</p>
</div>
</div>
</div>
</div>
<div class="border-t border-neutral-200 pt-6 mt-8">
<button class="cursor-pointer inline-flex flex-col leading-none outline-none overflow-hidden no-underline align-baseline whitespace-nowrap select-none transition-all duration-150 hover:opacity-85 focus:outline-none focus:ring-4 focus:ring-black/50 shadow-[0_2.8px_2.2px_rgba(0,_0,_0,_0.034),_0_6.7px_5.3px_rgba(0,_0,_0,_0.048),_0_12.5px_10px_rgba(0,_0,_0,_0.06),_0_22.3px_17.9px_rgba(0,_0,_0,_0.072),_0_41.8px_33.4px_rgba(0,_0,_0,_0.086),_0_100px_80px_rgba(0,_0,_0,_0.12)] text-base text-white text-center bg-gradient-to-b from-neutral-700 to-neutral-900 border-0 rounded-xl pt-2.5 pr-5 pb-2.5 pl-5 items-center justify-center" role="button">Tech Specifications</button>
</div>
</div>
</div>
</div>
</section>