JSFiddle - React, Tailwind, and code Playground
HTML
<div class="news">
<div class="newstitle" style="
line-height: 20px;
"><h1>bla bla bla fcking bla bla blaa more bla bla bla and more bla bla bla second bla bla bla fcking bla bla blaa more bla bla bla and more bla bla bla </h1></div>
</div>
CSS
.newstitle {
width: 486px;
height: 41px;
overflow: hidden;
background: #0a70a5;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #0a70a5 0%, #006092 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0a70a5), color-stop(100%,#006092));
background: -webkit-linear-gradient(top, #0a70a5 0%,#006092 100%);
background: -o-linear-gradient(top, #0a70a5 0%,#006092 100%);
background: -ms-linear-gradient(top, #0a70a5 0%,#006092 100%);
background: linear-gradient(to bottom, #0a70a5 0%,#006092 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0a70a5', endColorstr='#006092',GradientType=0 );
}
* {
margin: 0;
padding: 0;
outline: none;
position: relative;
}
h1 {
font: 13px bpg arial;
color: #fff;
text-shadow: 0 1px 0 rgba(0,0,0,.15);
line-height: 41px;
width: 476px;
padding: 0 5px;
height: 41px;
}