JSFiddle - React, Tailwind, and code Playground

by Sumit Patel

HTML

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
    <section class="advantages primary">
      <div class="container">
        <div class="row">
          <div class="col-sm-3 col-sm-offset-1 item-list-section">
            <div class="item-list">
              <div class="item">
                        <div class="inner">
                          <p>Продолжительный<br/>
                          срок службы</p>
                        </div>
                      </div>
                      <div class="item">
                        <div class="inner">
                          <p>Компактные<br/>
                          размеры</p>
                        </div>
                      </div>
                      <div class="item active">
                        <div class="inner">
                          <p>Насос с сухим ротором</p>
                        </div>
                      </div>
                      <div class="item">
                        <div class="inner">
                          <p>Котел способен стабильно<br/>работать даже при самом<br/>низком давлении</p>
                        </div>
                      </div>
                      <div class="item">
                        <div class="inner">
                          <p>Встроенная защита от<br/>
                          перепадов напряжения</p>
                        </div>
                      </div>
                      <div class="item">
                        <div class="inner">
                          <p>Надежная система<br/>
                          безопасности</p>
                        </div>
                      </div>
                      <div class="item">
                        <div class="inner">
                          <p>Наличие аварийных<br/>
                          режимов работы</p>
                        </div>
                      </div>
            </div>
          </div>
      ...

CSS

.advantages .item-list-section .item {
    	position: relative;
    	margin-bottom: 15px;
    }

    .advantages .item-list-section .item .inner {
    	position: relative;
    	display: inline-block;
    }

    .advantages .item-list-section .item .inner:after {
    	position: absolute;
    	font-family: 'FontAwesome';
    	content: "\f067";

    	color: #ef6611;
    	width: 14px;
    	height: 14px;
    	border: 1px solid;
    	border-radius: 30px;

    	top: 5px;
    	right: -30px;

    	font-size: 8px;
    	    line-height: 16px;
    	text-align: center;
        display:block;
    }

    .advantages .item-list-section .item .inner.bottom-icon:after {
    	top: 100%;
        margin-top: -18px;
    }

    .advantages .item-list-section .item.active .inner:after {
    	background: #f13a01;
    	color: #ffffff;
    	content: "\f068";
      font-family: 'FontAwesome';
    }