JSFiddle - React, Tailwind, and code Playground

by Ivan Ferrer

HTML

<div class="funnel_outer">
			<ul>
				<li class="funnel_step_1"><span><p>1</p></span></li>
				<li class="funnel_step_2"><span><p>2</p></span> </li>
				<li class="funnel_step_3"><span><p>3</p></span></li>
				<li class="funnel_step_4"><span><p>4</p></span></li>
			
			</ul>
		</div>

CSS

.funnel_outer {
    width:100%;
    float: left;
    position: relative;
    padding:0 10%;
}
.funnel_outer *{
    box-sizing:border-box}
.funnel_outer ul {
    margin:0;
    padding:0;
}
.funnel_outer ul li {
    float: left;
    position: relative;
    margin:1px 0;
    height: 80px;
    clear: both;
    text-align: center;
    width:100%;
    list-style:none
}
.funnel_outer li span{
    border-top-width: 80px;
    border-top-style:  solid;
    border-left: 25px solid transparent;
    border-right:25px solid transparent;
    height: 0;
    display: inline-block;
    vertical-align: middle;
}
.funnel_step_1 span{
    width:100%;
    border-top-color: #98c938;
}
.funnel_step_2 span{
    width:calc(100% - 50px);
    border-top-color: #729f3b
}
.funnel_step_3 span{
    width:calc(100% - 100px);
    border-top-color: #4b743f
}
.funnel_step_4 span{
    width:calc(100% - 150px);
    border-top-color: #264b44
}

.funnel_outer ul li.not_last span{
    border-left: 5px solid transparent;
    border-right:5px  solid transparent;
    border-top-width:50px;
}
.funnel_outer ul li span p{
    margin-top: -70px;
    color:#fff;
    font-weight: bold;
    text-align: center;
}