JSFiddle - React, Tailwind, and code Playground
by Torwan
HTML
<div class="container">
<span class="text outline">Woman.</span>
</div>
CSS
@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100;200;300;400;500;600;700;800;900&display=swap');
body {
font-family: 'Lexend Deca', sans-serif;
background: #333;
}
.container {
}
.container .text {
font-size: 220px;
font-weight: 600;
}
.outline {
color: white;
text-shadow:
-1px -1px 0 #FF71C2,
1px -1px 0 #FF71C2,
-1px 1px 0 #FF71C2,
1px 1px 0 #FF71C2
}
@supports((text-stroke: 2px #FF71C2) or (-webkit-text-stroke: 2px #FF71C2)) {
.outline {
color: transparent;
-webkit-text-stroke: 2px #FF71C2;
text-stroke: 2px #FF71C2;
text-shadow: none;
}
}