JSFiddle - React, Tailwind, and code Playground

by artgas_pro

HTML

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Інвойс TLR-20-17 — Відображення звірки</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Inter', sans-serif;
        }
    </style>
</head>
<body class="bg-slate-50 p-6 min-h-screen">

    <div class="max-w-[1400px] mx-auto bg-white p-6 rounded-xl shadow-md border border-slate-200/80">
        <div class="flex justify-between items-center mb-6 pb-4 border-b border-slate-100">
            <div>
                <span class="text-xs font-bold tracking-wider text-indigo-600 uppercase">Бухгалтерська звірка</span>
                <h2 class="text-2xl font-extrabold text-slate-800 mt-1">Інвойс "TLR-20-17"</h2>
            </div>
            <div class="flex items-center gap-3">
                <span class="text-xs text-slate-400">Статус інвойсу:</span>
                <span class="bg-amber-100 text-amber-800 text-xs font-bold px-3 py-1.5 rounded-full border border-amber-200">
                    У процесі
                </span>
            </div>
        </div>

        <div class="overflow-x-auto rounded-lg border border-slate-200">
            <table class="min-w-full border-collapse text-left bg-white">
                <thead>
                    <tr class="bg-slate-50 border-b border-slate-200 text-xs font-bold text-slate-700 select-none">
                        <th class="p-3 text-center w-12">№</th>
                        <th class="p-3">3D Модель</th>
                        <th class="p-3">Назва</th>
                        <th class="p-3">Код МБ</th>
                        <th class="p-3">Код РН</th>
                        <th class="p-3">Код Австрії</th>
                        <th...