JSFiddle - React, Tailwind, and code Playground

by Kasyanov10

HTML

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<title>CSS grid</title>
	<link rel="stylesheet" href="css/main.css">
</head>
<body>
	<section>
		<div class="cards">
			<div class="container">
				<div class="cards">
					<div class="card">
						<img src="https://avatars.mds.yandex.net/get-pdb/1769690/acfdf281-a95f-4745-b89b-1bf17bdd2587/s1200?webp=false" alt="" class="img">
						<div class="wrapper-info">
							<div class="h44">
								<h4>Матовые</h4>
							</div>
							<div class="h55">
								<h5>2137 заказа</h5>
							</div>	
						</div>
						<div class="info-potolok">
							Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui deleniti illum eveniet quod, omnis recusandae quis possimus reprehenderit laboriosam sapiente quibusdam tenetur soluta! Minima doloremque, repudiandae officiis nemo amet quos.
							Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui deleniti illum eveniet quod, omnis recusandae quis possimus reprehenderit laboriosam sapiente quibusdam tenetur soluta! Minima doloremque, repudiandae officiis nemo amet quos.
						</div>
					</div>
					<div class="card">
						<img src="https://avatars.mds.yandex.net/get-pdb/1769690/acfdf281-a95f-4745-b89b-1bf17bdd2587/s1200?webp=false" alt="" class="img">
						<div class="wrapper-info">
							<div class="h44">
								<h4>Матовые</h4>
							</div>
							<div class="h55">
								<h5>2137 заказа</h5>
							</div>	
						</div>
						<div class="info-potolok">
							Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui deleniti illum eveniet quod, omnis recusandae quis possimus reprehenderit laboriosam sapiente quibusdam tenetur soluta! Minima doloremque, repudiandae officiis nemo amet quos.
							Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui deleniti illum eveniet quod, omnis recusandae quis possimus reprehenderit laboriosam sapiente quibusdam tenetur soluta! Minima doloremque, repudiandae officiis nemo amet...

CSS

* {
	margin: 0;
	padding: 0;
}

.container {
	width: 1080px;
	margin: 0 auto; 
}

.card {
	width: 250px;
	height: 150px;
	border: 1px solid #000;
	background-color: #fff;
	/*margin: 0 100px;*/
}

.img {
	width: 250px;
	height: 100px;
}

.wrapper-info {
	display: flex;
	justify-content: space-between;
}

.info-potolok {
	display: none;
}

.card > .info-potolok {
	display: none; 
}

.card:hover {
	height: 400px;
	transition: all 0.5s ease;
}

.card:hover > .info-potolok {
	display: block;
}

.cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 50px;
}