JSFiddle - React, Tailwind, and code Playground

by velo_ninja

HTML

<head>
                <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
                <style>
                    body {
                        font-family: 'Roboto', sans-serif;
                        margin: 0;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        height: 100vh;
                        background-color: #f1f5f8;
                    }
                    .container {
                        background-color: white;
                        padding: 40px;
                        border-radius: 12px;
                        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
                        width: 80%;
                        max-width: 900px;
                        text-align: center;
                        font-size: 18px;
                    }
                    h1 {
                        font-size: 40px;
                        font-weight: 700;
                        margin-bottom: 20px;
                        color: #2c3e50;
                        text-transform: uppercase;
                    }
                    .logo {
                        width: 160px;
                        height: 160px;
                        margin-bottom: 20px;
                    }
                    .info-section {
                        display: grid;
                        grid-template-columns: 1fr 1fr;
                        gap: 20px;
                        margin-bottom: 30px;
                        padding: 20px;
                        background-color: #ecf0f1;
                        border-radius: 8px;
                    }
                    .info-item {
                        padding: 15px;
                        background-color: #ffffff;
                        border-radius: 8px;
                        font-size: 20px;
...