JSFiddle - React, Tailwind, and code Playground

by Vitaliy

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
            <div  class="conteiner" id="lp-offer">
                <div class="row">
                    <div class="col-sm-12 col-md-4 col-lg-3">
                        <div>
                            <div>
                                <p><i class="lp-icon lp-icon1"></i></p>
                                <p>Заголовок</p>
                                <p>Подзаголовок. Текст разный.</p>
                                <button class="btn btn-default" data-toggle="modal" data-target="#lp-order-form">
                                    Заказать
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-4 col-lg-3">
                        <div>
                            <div>
                                <p><i class="lp-icon lp-icon2"></i></p>
                                <p>Заголовок</p>
                                <p>Подзаголовок. Текст разный.</p>
                                <button class="btn btn-default" data-toggle="modal" data-target="#lp-order-form">
                                    Заказать
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-4 col-lg-3">
                        <div>
                            <div>
                                <p><i class="lp-icon lp-icon3"></i></p>
                                <p>Заголовок</p>
                                <p>Подзаголовок. Текст разный.</p>
                                <button class="btn btn-default" data-toggle="modal" data-target="#lp-order-form">
                                    Заказать
                              ...

SCSS

body{
  background:#aaa;
}
.lp-icon{
  height: 46px;
  margin-top: 43px;
  width: 46px;
  background-image: url("http://s28.postimg.org/m4okq07x9/ico_lp_offer_46px.png");/*тут свой путь к картинке*/ 
  display:inline-block;
}
@for $i from 1 to 4{
  .lp-icon#{$i}{
    background-position: 0 -($i - 1)*46px;
    &:hover{
      background-position: 46px -($i - 1)*46px;
    }
  }
}