JSFiddle - React, Tailwind, and code Playground

by cchana

HTML

<div>
	<h3>Title</h3>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur, mauris ornare tincidunt sollicitudin, ante ipsum mollis nisl, eget sagittis mauris lacus et metus.</p>
</div>

<div>
	<h3>Title</h3>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur, mauris ornare tincidunt sollicitudin, ante ipsum mollis nisl, eget sagittis mauris lacus et metus.</p>
</div>

<div>
	<h3>Title</h3>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur, mauris ornare tincidunt sollicitudin, ante ipsum mollis nisl, eget sagittis mauris lacus et metus.</p>
</div>

<div>
	<h3>Title</h3>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur, mauris ornare tincidunt sollicitudin, ante ipsum mollis nisl, eget sagittis mauris lacus et metus.</p>
</div>

<div>
	<h3>Title</h3>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur, mauris ornare tincidunt sollicitudin, ante ipsum mollis nisl, eget sagittis mauris lacus et metus.</p>
</div>

CSS

div:first-child {
	background: red;
	border-radius: 50% 50% 35% 65% / 40% 50% 50% 60%;
	height: 400px;
	width: 400px
}

div:nth-child(2) {
	background: #F50;
	border-radius: 75% / 50% 90% 50% 90%;
	color: #FFF;
	padding: 50px;
	width: 200px;
}

div:nth-child(3) {
	background: #F50;
	border-radius: 75% / 90% 50% 90% 50%;
	color: #FFF;
	padding: 50px;
	width: 200px;
}

div:nth-child(4) {
	background: #F50;
	border-radius: 75% / 90% 60%;
	color: #FFF;
	padding: 50px;
	width: 200px;
}

div:nth-child(5) {
	background: #F50;
	border-radius: 75% / 60% 90%;
	color: #FFF;
	padding: 50px;
	width: 150px;
}

h3,
p {
	margin: 0;
	padding: 10px 0;
}