Pure CSS vs Bootstrap vs Tailwind

Here is an example:

Responsive Boxes – Pure CSS

import './App.css';

function App() {

  return (
    <>
      <div className="container">
        <h2 className="title">Responsive Box Layout (Pure CSS)</h2>
        <div className="box-container">
          <div className="box">Box 1</div>
          <div className="box">Box 2</div>
          <div className="box">Box 3</div>
        </div>
      </div>
    </>
  );
}

export default App;
App.css
/* Global Styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  width: 100%;

}

/* Container Styles */
.container {
  padding: 20px;
  text-align: center;
  background-color: #f8f9fa;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Title Styling */
.title {
  margin-bottom: 20px;
  font-size: 24px;
}

/* Responsive Box Layout */
.box-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: left;
}

/* Default: One column (mobile-first) */
.box {
  background: #007bff;
  color: white;
  padding: 40px;
  font-size: 18px;
  border-radius: 5px;
  width: 100%;
  text-align: center;
}

/* Medium Screens: Two columns */
@media (min-width: 768px) {
  .box {
    width: calc(50% - 10px);
  }
}

/* Large Screens: Three columns */
@media (min-width: 992px) {
  .box {
    width: calc(33.33% - 10px);
  }
}

Uses flexbox with flex-wrap: wrap to handle responsiveness.Media queries define breakpoints:

  • @media (min-width: 768px) → 2 columns.
  • @media (min-width: 992px) → 3 columns.

Responsive Boxes – Bootstrap

import 'bootstrap/dist/css/bootstrap.min.css';

function App() {
  return (
    <>
      <div className="container mt-4">
        <h2 className="text-center mb-4">Responsive Layout (Bootstrap)</h2>
        <div className="row g-3">
          <div className="col-12 col-md-6 col-lg-4">
            <div className="p-4 bg-primary text-white text-center rounded">
              Box 1
            </div>
          </div>
          <div className="col-12 col-md-6 col-lg-4">
            <div className="p-4 bg-primary text-white text-center rounded">
              Box 2
            </div>
          </div>
          <div className="col-12 col-md-6 col-lg-4">
            <div className="p-4 bg-primary text-white text-center rounded">
              Box 3
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

export default App;

col-12 → Full width on extra-small screens (mobile).
col-md-6 → Two columns on medium screens (tablets).
col-lg-4 → Three columns on large screens (desktops).
g-3 (Bootstrap’s gap utility) for spacing.

Tailwind example

    <div className="min-h-screen flex items-center justify-center bg-gray-100">
      <div className="bg-white p-8 rounded-lg shadow-md w-full max-w-md">
        <h2 className="text-2xl font-bold text-center text-gray-700 mb-6">
          Login
        </h2>
        <form>
          <div className="mb-4">
            <label className="block text-gray-600 text-sm mb-2" htmlFor="email">
              Email
            </label>
            <input
              type="email"
              id="email"
              placeholder="Enter your email"
              className="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400"
            />
          </div>
          <div className="mb-4">
            <label
              className="block text-gray-600 text-sm mb-2"
              htmlFor="password"
            >
              Password
            </label>
            <input
              type="password"
              id="password"
              placeholder="Enter your password"
              className="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400"
            />
          </div>
          <button
            type="submit"
            className="w-full bg-blue-500 text-white py-2 rounded-md hover:bg-blue-600 transition duration-300"
          >
            Login
          </button>
          <p className="text-center text-sm text-gray-500 mt-4">
            <a href="#" className="text-blue-500 hover:underline">
              Forgot your password?
            </a>
          </p>
        </form>
      </div>
    </div>
Scroll to Top