JSFiddle - React, Tailwind, and code Playground

by rami7250

HTML

<h1 data-title="בדיקה"> <a href="#"> בדיקה </a> </h1>

CSS

body {
		background: #666;
		padding: 1em;
	}

	h1 {
		position: relative;
		font-size: 200px;
		margin-top: 0;
		font-family: 'Myriad Pro', 'Myriad', helvetica, arial, sans-serif;
		text-shadow: 2px 3px 3px #292929;
		letter-spacing: -7px;
		-webkit-text-stroke: 1px white;
	
	}
	
	

	h1 a {
		text-decoration: none;
		color: #ffffff;
		position: absolute;

		-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,0)), to(rgba(0,0,0,1)));
		text-shadow: 0 2px 0 #e9e9e9;
		-webkit-transition: all .3s;
		-moz-transition: all .3s;
		transition: all .3s;
	}
	

	h1:after {
		color: #dbdbdb;
		content : attr(data-title);
	}