Skip to content

Instantly share code, notes, and snippets.

@Ajinkgupta
Created April 5, 2024 12:09
Show Gist options
  • Save Ajinkgupta/1ea177c3ae9e245f81b2c56d0685d5c0 to your computer and use it in GitHub Desktop.
Save Ajinkgupta/1ea177c3ae9e245f81b2c56d0685d5c0 to your computer and use it in GitHub Desktop.
React Card with glasmorphism
.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;
}
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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment