JSFiddle - React, Tailwind, and code Playground

by rami7250

HTML

<div>
		<li>
			<span>Olivia Rodrigo</span>
		</li>
</div>

CSS

li {
	--y: calc(100% - 2rem);
	display: grid;
	grid-template-columns: minmax(3.75em, auto) 1fr;
	gap: 0 0.5em;
	break-inside: avoid;
  page-break-inside: avoid;
	background: radial-gradient(circle at 30% var(--y), rgb(50 50 50), rgb(0 0 0));
	color: white;
	border-radius: 0.75rem;
	overflow: hidden;
	box-shadow: 0.25rem 0.25rem 0.5rem rgb(0 0 0 / 0.17)
  margin-top: 1rem;
  width: auto;
  height: auto;
  font-size:20px;
  font-family:arial;
  }
  
span {padding:10px;}