JSFiddle - React, Tailwind, and code Playground

by oktaviardi pratama

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<!-- Background halaman abu-abu terang -->

    <div class="container py-5">

        <h1 class="text-center text-primary mb-5 fw-bold">Demo Utility Classes</h1>

        <div class="row g-4 justify-content-center">

            <!-- CARD 1: Gaya Bersih & Minimalis -->
            <div class="col-md-4">
                <!--
                   p-4: Padding dalam kartu
                   bg-white: Latar putih
                   rounded-4: Sudut sangat tumpul
                   shadow: Bayangan standar
                   h-100: Tinggi penuh sesuai row
                -->
                <div class="card p-4 bg-white rounded-4 shadow h-100 border-0">
                    <div class="card-body text-center">
                        <!-- Badge -->
                        <span class="badge bg-info text-dark mb-2">Baru</span>

                        <h3 class="card-title fw-bold text-dark">Produk Standar</h3>
                        <p class="card-text text-muted my-3">
                            Menggunakan utility untuk spacing (<code>my-3</code>) dan warna teks (<code>text-muted</code>).
                        </p>

                        <!-- Button Group dengan Flex -->
                        <div class="d-grid gap-2">
                            <button class="btn btn-primary">Beli Sekarang</button>
                            <button class="btn btn-outline-secondary">Detail</button>
                        </div>
                    </div>
                </div>
           ...

CSS

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

JavaScript

">">