1.karta {
2  background: white;
3  padding: 16px 18px;
4  border-radius: 10px;
5  border-left: 4px solid #fbbf24;
6  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
7}
8
9.karta h2 {
10  margin: 0 0 6px;
11  color: #0f172a;
12}
13
14.karta p {
15  margin: 0;
16  color: #64748b;
17}

1import "./Karta.css";
2
3function Karta({ sarlavha, matn }) {
4  return (
5    <div className="karta">
6      <h2>{sarlavha}</h2>
7      <p>{matn}</p>
8    </div>
9  );
10}
11
12export default Karta;

1function Tugma() {
2  return (
3    <button
4      style={{
5        background: "#fbbf24",
6        color: "#0f172a",
7        padding: "10px 20px",
8        border: "none",
9        borderRadius: "8px",
10        fontWeight: 700,
11        cursor: "pointer",
12      }}
13    >
14      Bosing
15    </button>
16  );
17}

1function Karta({ faol }) {
2  const stil = {
3    background: faol ? "#10b981" : "#64748b",
4    color: "white",
5    padding: "10px",
6  };
7
8  return <div style={stil}>{faol ? "Faol" : "Nofaol"}</div>;
9}

1.karta {
2  background: white;
3  padding: 16px;
4  border-radius: 10px;
5}
6
7.sarlavha {
8  color: #0f172a;
9  font-size: 20px;
10}

1import styles from "./Karta.module.css";
2
3function Karta() {
4  return (
5    <div className={styles.karta}>
6      <h2 className={styles.sarlavha}>Salom</h2>
7    </div>
8  );
9}

1function Alert({ turi, matn }) {
2  // turi: "success" | "warning" | "error"
3
4  return (
5    <div className={`alert alert-${turi}`}>
6      {matn}
7    </div>
8  );
9}
10
11// Yoki shartli
12function Tugma({ faol }) {
13  const cls = faol ? "btn btn-primary" : "btn btn-disabled";
14  return <button className={cls}>Bos</button>;
15}
16
17// Bir nechta shart
18function Kuza({ katta, faol }) {
19  const classes = [
20    "karta",
21    katta && "katta",
22    faol && "faol",
23  ].filter(Boolean).join(" ");
24
25  return <div className={classes}>Karta</div>;
26}

1# Vite loyihaga Tailwind qo'shish
2npm install -D tailwindcss postcss autoprefixer
3npx tailwindcss init -p

1function Karta({ sarlavha, matn }) {
2  return (
3    <div className="bg-white p-4 rounded-xl shadow border-l-4 border-amber-400">
4      <h2 className="text-slate-900 text-xl font-bold mb-1">
5        {sarlavha}
6      </h2>
7      <p className="text-slate-500 text-sm">
8        {matn}
9      </p>
10    </div>
11  );
12}

1# Terminal
2npm install react-icons

1import { FaReact, FaHeart } from "react-icons/fa";
2import { MdEmail } from "react-icons/md";
3
4function Header() {
5  return (
6    <header>
7      <FaReact color="#61dafb" size={40} />
8      <h1>Mening React saytim</h1>
9      <button>
10        <FaHeart color="red" /> Yoqtirish
11      </button>
12      <a href="mailto:test@test.com">
13        <MdEmail size={24} />
14      </a>
15    </header>
16  );
17}