Dashboard oscuro shadcn/ui con GSAP: prompt de ejemplo
VISTA DE CÓDIGO
Prompt
Create a single HTML page with a modern dark dashboard UI inspired by shadcn/ui. Use Tailwind CSS (CDN), Swiper for a carousel of stat cards, GSAP for scroll-triggered animations (stagger, fade, scale), and AOS for section reveals. Include: sidebar navigation (dark glass), top header with search and avatar, grid of 4 stat cards (revenue, users, orders, growth) with icons, a bar chart (CSS-only), a recent orders table, and a footer. All interactive elements (hover, click) must have smooth transitions. Keep it compact, production-ready, and visually stunning.
shadcn/ui風のダッシュボードをTailwind CSSで構築。Swiperで統計カードをカルーセル表示、GSAPとAOSでスクロールに応じたフェード・スケールアニメーションを実装。ガラス調サイドバー、検索ヘッダー、4つの統計カード、CSSバーチャート、注文テーブルを収録。すべての操作にスムーズなトランジションを適用し、プロダクション品質に仕上げています。
Resumen del prompt
Panel de control estilo shadcn/ui construido con Tailwind CSS. Las tarjetas de estadísticas se muestran en un carrusel con Swiper, y se implementan animaciones de desvanecimiento y escala al hacer scroll con GSAP y AOS. Incluye una barra lateral de vidrio, un encabezado de búsqueda, 4 tarjetas de estadísticas, un gráfico de barras CSS y una tabla de pedidos. Se aplican transiciones suaves a todas las interacciones, logrando una calidad de producción.
¿Te resultó útil este prompt?
Comentarios
Los comentarios aparecen después de la moderación
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選