JSFiddle - React, Tailwind, and code Playground

by xxxvvvxxx

HTML

<p>
	<a href="https://oriel.com">test test test test test</a>
</p>

CSS

a {
	word-break: break-all;
	color: #3e5898;
	transition: color .25s ease-in;
	color: #3E5898;
	background-repeat: no-repeat;
	background-size: 100% 0.2em;
	background-position: 0 100%;
	background-image: linear-gradient(to right,#00BCD4,#5C6BC0);
	transition: all .25s ease-in;
	padding: 2px 0;
}

a:hover {
	background-size: 100% 100% !important;
	color: #fff !important;
	border-radius: 10px !important;
}