22 days ago

Create a professional, dark-themed Chess Analysis Interface resembling Lichess or Chess.com using Tailwind CSS. Layout Structure: Main Container: Full viewport height (h-screen), dark background (bg-[#161512]), flexbox layout (flex-row) centered. Left Side (Board Area): A large, responsive square container for the chessboard. Use a placeholder grid (8x8) or a large div with a wood-texture color (e.g., #b58863 and #f0d9b5) to represent the board area. Add a subtle shadow (shadow-2xl) and rounded corners. Right Side (Analysis Panel): A fixed-width sidebar (approx 300px to 400px) on the right side. Background should be slightly lighter than the main background (bg-[#262421]). Sidebar Details (Move History): Header: A small top bar with "Analysis" text and action icons (flip board, settings). Move Table (Crucial): Create a scrollable data table for the move history. Columns: 3 distinct columns: "Turn Number" (narrow, gray text), "White Move", and "Black Move". Rows: Compact rows. Use zebra-striping (alternating colors like transparent and #302e2c) for readability. Typography: Use a clean sans-serif or monospace font for the moves (e.g., "e4", "Nf3"). Text color should be light gray (#bababa). Active State: Highlight one specific move (e.g., "Nc3") with a bright blue background (bg-[#3692e7]) and white text to simulate the current active move. Footer/Controls: Below the move table, add a control bar with navigation icons: Start (<<), Previous (<), Next (>), End (>>). Style them as gray buttons that turn lighter on hover. Overall Style: Minimalist, high contrast, "dark mode" aesthetic. Professional look suitable for a SaaS application.

Fork

Windframe is an AI visual editor for rapidly building stunning web UIs & websites

Start building stunning web UIs & websites!

Build from scratch or select prebuilt tailwind templates