Membuat Komponen Card dengan Tailwind Css #Tailwind part 2

Halo sahabat web designer. Kembali lagi bersama Ahmad Syarifudin. Pada artikel ini, penulis akan membuat tutorial membuat komponen card dengan tailwind css. Akan tetapi, sebelumnya anda harus install dulu Tailwind css. Jika anda belum mengerti cara install tailwind css, anda bisa membaca artikel part 1 tentang :

Belajar Tailwind CSS, Installasi Tailwind dan Coba Membuat Login dengan Tailwind CSS

Berikut ini langkah-langkah membuat card dengan Tailwind css :

1. Buat folder belajar-tailwind

2. Install Talwind css pada folder belajar-tailwind

3. Jika sudah install tailwind css, buka projek pada VS Code, sublime text, ataupun text editor lainnya

4. Masuk ke folder src

5. Buatlah file card.html, dan ketikkan sintak dibawah ini.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tuturoal Membuat Card dengan Tailwind Css</title>

    <link href="https://www.ahmadsyarifudin.id/dist/output.css" rel="stylesheet">
</head>
<body class="bg-slate-200	">
    <div class="grid grid-cols-4 gap-4 pt-5 pl-5">
        <div class="card">
            <img src="images/bg-login.jpg" alt="">
            <div class="card-body">
                <h3>Card Title</h3>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequuntur eveniet fugiat excepturi</p>

                <a type="submit" class="button">Read more..</a>
            </div>
        </div>
    </div>
</body>
</html>

6. Selanjutnya buat file input.css di dalam folder src, dan ketikkan sintak dibawah ini

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .card {
    @apply bg-white p-2 border-x border-y border-solid border-inherit rounded-sm;
  }
  .card .card-body {
    @apply p-3;
  }
  .card img {
    @apply rounded;
  }
  .card .card-body h3 {
    @apply font-serif text-xl font-bold leading-7 pb-2;
  }
  .card .card-body .button {
    @apply mt-3 bg-sky-500/100 py-2 px-3 rounded-md text-white font-medium;
  }
}

7. Buka terminal / cmd / git bash dan ketikkan kode dibawah ini

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

Hasilnya akan menampilkan card seperti pada gambar artikel ini. Itulah tutorial membuat card dengan tailwind css, semga bermanfaat.