JSFiddle - React, Tailwind, and code Playground

by oktaviardi pratama

HTML

<!DOCTYPE html>

<html class="light" lang="id"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>ThriftVibe - Gaya Unik, Dompet Aman</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Hanken+Grotesk:wght@400;500;600&family=Material+Symbols+Outlined:wght,[email protected],0..1&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,[email protected],0..1&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:[email protected]&family=Sora:[email protected]&display=swap" rel="stylesheet"/>
<script id="tailwind-config">
        tailwind.config = {
            darkMode: "class",
            theme: {
                extend: {
                    "colors": {
                        "tertiary-fixed": "#c1ebe9",
                        "on-primary": "#ffffff",
                        "surface-container-lowest": "#ffffff",
                        "tertiary-fixed-dim": "#a5cecc",
                        "inverse-primary": "#ffb95e",
                        "surface": "#fff9e6",
                        "on-surface-variant": "#514537",
                        "on-tertiary-container": "#2a5251",
                        "surface-container-highest": "#ebe4b3",
                        "background": "#fff9e6",
                        "primary-fixed-dim": "#ffb95e",
                        "on-background": "#1f1c00",
                        "on-error": "#ffffff",
                        "surface-dim": "#e3dbab",
                        "outline": "#847565",
                        "on-tertiary-fixed": "#00201f",
                        "surface-container-high": "#f1e9b8",
                        "on-primary-fixed": "#2a1700",
                        "on-error-container":...