React Card with glasmorphism

Card.css

  
  .column-container {
    padding-top: 100px!important;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 10px;
  }
  
  .column {
    flex: 0 0 calc(50% - 20px); /* Adjust width for small screens */
    margin-bottom: 20px;
  }
  
  @media screen and (min-width: 768px) {
    .column {
      flex: 0 0 calc(33.33% - 20px); /* Adjust width for larger screens */
    }
  }
  
  .card {
    border: 1px solid rgba(255, 255, 255, 0.2); /* Adjust border color for glass effect */
    background: rgba(255, 255, 255, 0.1); /* Adjust background color for glass effect */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 
                0 0 0 1px rgba(255, 255, 255, 0.2); /* Adjust box shadow for glass effect */
    transition: 0.3s;
    border-radius: 20px;
    padding: 20px;
    color: white;
    backdrop-filter: blur(10px); /* Apply blur effect */
    height: 400px;
  }
  
  .card:hover {
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2), 
                0 0 0 2px rgba(255, 255, 255, 0.4); /* Adjust hover box shadow */
  }
  
  
  .card h2 {
    margin-top: 0;
  }
  
  .card p {
    margin-bottom: 0;
  }
  

Card.jsx

import React from 'react';
import './Card.css'; // Import your CSS file

const Card = () => {
  return (
    <div className="column-container">
      <div className="column">
        <div className="card">
          <h2>Card 1</h2>
          <p>This is the content of Card 1.</p>
        </div>
      </div>
      <div className="column">
        <div className="card">
          <h2>Card 2</h2>
          <p>This is the content of Card 2.</p>
        </div>
      </div>
      <div className="column">
        <div className="card">
          <h2>Card 3</h2>
          <p>This is the content of Card 3.</p>
        </div>
      </div>
      <div className="column">
        <div className="card">
          <h2>Card 4</h2>
          <p>This is the content of Card 4.</p>
        </div>
      </div>
    </div>
  );
};

export default Card;