JSFiddle - React, Tailwind, and code Playground

by vend3tta

HTML

<div class="catalog-inner">
                        <div class="left-cat">
                          <a href="#" title=""><img src="uploads/022.png" width="165" height="141" alt="" title="" /></a>
                        </div>
                        <div class="right-cat">
                          <div class="logotip"><a href="#" title=""><img src="images/title-1.gif" width="68" height="22" alt="" title="" /></a></div>
                          <h5><span>Артикул: </span><a href="#" title="">90391</a></h5>
                          <p>Альбом д/рис. А4 8л скрепка "Веселые зверята", обл.мел.карт., блок 100гр/м</p>
                          <div class="redact-outer">
                            <div class="redact-left redact-left-second">
                              <p>Упаковка: 5<i>|</i>10</p>
                              <a class="delete" href="#" title="">Удалить</a>
                              <ul class="icos clearfix">
                                <li><img src="images/icos-03.gif" width="16" height="17" alt="" title="" /></li>
                                <li><img src="images/icos-04.gif" width="16" height="17" alt="" title="" /></li>
                                <li><img src="images/icos-02.gif" width="16" height="17" alt="" title="" /></li>
                              </ul>
                              <div class="clear"></div>
                            </div>
                            <div class="redact-right">
                              <div class="product-footer-inner">
                                <p class="hov clearfix">
                                  <span>Много</span>
                                  <img src="images/pok.png" width="4" height="10" alt="" title="" />
                                  <img src="images/pok.png" width="4" height="10" alt="" title="" />
                                  <img src="images/pok.png" width="4" height="10" alt="" title="" />
                                </p>
                   ...

CSS

.catalog-inner {border-bottom: 1px solid #b2b2b2; position: relative; width: 100%;}
.left-cat {/*width: 201px;*/ float: left; padding: 0px 0 0 0; position: relative; z-index: 3; }
.left-cat a {}
.left-cat a img { width: 165px; height: 141px;} 
.right-cat {width: 483px; float: right; padding: 10px 0 24px 0; min-height: 107px;}
.right-cat:hover {background: #f7f7f7; z-index:90; }
.right-cat.current {background: #f7f7f7;}
.right-cat h5 {font-size: 13px; font-weight: bold; padding-bottom: 6px; /*margin-top: 5px;*/}
.right-cat h5 a { text-decoration: none; color: #333333; }
.right-cat h5 span {font-weight: normal; color: #666;}
.right-cat p {font-weight: bold; padding: 0 150px 0 0;}
.right-cat .p-1 {font-size: 14px;}