JSFiddle - React, Tailwind, and code Playground

by Softlink

HTML

<div class="wrap">
		<div class="title">новости</div>
		<div class="line"></div>
	</div>
	<div class="wrap">
		<div class="title">бла бла бла бла</div>
		<div class="line"></div>
	</div>

CSS

body {
    margin: 0;
    height: 100%;
    padding: 100px;
}

.wrap{
	width: 300px;
	overflow: hidden;
	padding: 5px;
}

.title{
	position: relative;
	float: left;
	padding: 5px 10px 5px 5px;
	margin-right: 30px;
	color: #222;
	background: #999;
}

.title:before{
	content:'';
	position: absolute;
	top: 0;
	bottom: 0;
	right: -11px;
	left: -20px;
	background: #999;
	box-shadow: 0 3px 3px 0 rgba(0,0,0,0.5);
	-webkit-transform: skewX(-30deg);
	transform: skewX(-30deg);
	z-index: -1;
}

.line{
	overflow: hidden;
	background: linear-gradient(to right, rgba(34,34,34,1) 0%,rgba(34,34,34,1) 100%);
	height: 3px;
	margin-top: 15px;
}