JSFiddle - React, Tailwind, and code Playground

by xxxvvvxxx

HTML

<div class="wrapper">
	<div class="card front">
		<img src="https://kin-phinf.pstatic.net/20230422_256/16821551086900VCyD_JPEG/3472505517137670492.jpg" />
	</div>
	<div class="card back">
		<div class="left">
			<div class="text">text</div>
			<div class="text">text</div>
		</div>
		<div class="right">
			<div>Designer XXX</div>
			<div>T 12 3456 7890</div>
			<div>E [email protected]</div>
			<div>A 서울시 강남구 도산대로 45길 7</div>
		</div>
	</div>
</div>

CSS

:root {
	--main-width: 500px; /* 카드너비 */
	--main-height: 300px; /* 카드높이 */
	--image-height: 100px; /* 이미지높이 */
	--border-radius: 30px; /* 카드 테두리 */
	--image-border-radius: 15px; /* 이미지 테두리 */
	--text-font-size: 40px; /* text영역 글자크기 */
	--addr-font-size: 16px; /* 주소영역 글자크기 */
}
* {
	padding:0; margin:0;
	box-sizing:border-box;
}
.wrapper {
	width: var(--main-width);
	height: var(--main-height);
}
.card {
	background: #000;
	border-radius: var(--border-radius);
	width: var(--main-width);
	height: var(--main-height);
	display:flex;
	padding: 40px;
	color:#fff;
}
.card img {
	margin: calc( var(--main-height)/2 - var(--image-height) ) auto;
	border-radius: var(--image-border-radius);
}
.card.back {
	display: none;
}
.card .left {
	margin:10px;
}
.card .right {
	margin-top: auto;
	margin-left:auto;
	font-size: var(--addr-font-size);
	font-weight: 600;
}
.card .text {
	font-size: var(--text-font-size);
	font-weight: 600;
	line-height: 27px;
}
.card .text:nth-child(2) {
	margin-top:10px;
}
.wrapper:hover .card.front {
	display: none;
}
.wrapper:hover .card.back {
	display: flex;
}