JSFiddle - React, Tailwind, and code Playground

by João Felipe

HTML

<div id="conteudo">
    <div class="top_conteudo"></div>
    <div class="center_conteudo">


        <div id="DSL_HomeGeral">



            <ul id="Dot_ListaProdutosUL" class="Dot_ListaProdutosULClass">
                <li id="Dot_ListaProdutosLI_1" class="Dot_ListaProdutosLIClass">

                    <div class="DSL_BlocoProdutos">
                        <p class="produto_img">
                            <a href="http://www.dotstore.com.br/74446_salessuplementos/produto/6382918/Biscoito-Nescau"><img alt="Biscoito Nescau: Clique para ver detalhes" title="Biscoito Nescau: Clique para ver detalhes" src="http://www.dotstore.com.br/74446_salessuplementos/produtos/PROg139.jpg" width="170"></a>
                        </p>
                        <span class="produto_titulo">
                            <a href="http://www.dotstore.com.br/74446_salessuplementos/produto/6382918/Biscoito-Nescau" class="DSL_ColorTxt01">Biscoito Nescau</a>
                        </span>
                        <span class="produto_valorde">
                            de:  <span id="ValorDe_6382918"><span class="PrecoProdutoDeValor"></span> R$ 1,19</span>
                        </span>
                        <span class="produto_valorpor">
                            Por: <span id="ValorPor_6382918"><span class="PrecoProdutoPorValor"></span> R$ 0,99</span>
                        </span>
                        <span class="produto_valorvezes">
                            ou
                        </span>
                        <div class="DSL_Espiar"><img src="http://www.dotstore.com.br/74446_salessuplementos/imagens/BotEspiar.gif" alt="Ver detalhes" title="Ver detalhes" style="cursor:pointer" onclick="AbreJanelaDivPop('/dotstore/loja/Espiar.asp?ProdutoID=6382918&amp;lj=74446',576,407,false,'/74446_salessuplementos/htm/Loading.htm')"></div>

                    </div>
                </li>
                <li id="Dot_ListaProdutosLI_2" class="Dot_ListaProdutosLIClass">

        ...

CSS

/*Conteudo Style*/
.content {
    width: 992px;
    margin: auto;
}

#conteudo {
    width: 860px;
    float: left;
    display: block;
    margin: 5px 0 0 -26px;
}

.top_conteudo {
    width: 877px;
    height: 130px;
    display: block;
    background: url("http://www.dotstore.com.br//74446_salessuplementos/imagens/top_content.png") no-repeat;
    margin-top:25px;
}

.center_conteudo {
    width: 877px;
    min-height: 725px;
    background: url("http://www.dotstore.com.br//74446_salessuplementos/imagens/center_content.png") repeat-y;
}

    .center_conteudo ul.Dot_ListaProdutosULClass {
        min-height: 725px;
        width: 809px;
        display: block;
        margin: 0 0 0 33px;
    }

        .center_conteudo ul.Dot_ListaProdutosULClass li.Dot_ListaProdutosLIClass {
            width: 188px;
            min-height: 218px;
            margin: 0 12px 30px 0;
            float: left;
            background: url("http://www.dotstore.com.br//74446_salessuplementos/imagens/produto_img_prateleira.png") no-repeat 0px 125px;
        }

            .center_conteudo ul.Dot_ListaProdutosULClass li.Dot_ListaProdutosLIClass p.produto_img a img {
                margin-left: auto;
                height: 138px;
                margin-bottom: 20px;
                margin-right: auto;
                display: block;
            }

            .center_conteudo ul.Dot_ListaProdutosULClass li.Dot_ListaProdutosLIClass span a {
                display: block;
                margin-left: auto;
                margin-right: auto;
                text-align: center;
            }

            .center_conteudo ul.Dot_ListaProdutosULClass li.Dot_ListaProdutosLIClass span.produto_titulo a {
                font-size: 16px;
                text-align: center;
                font-family: "Myriad Pro Semibold";
                color: rgb( 251, 246, 246 );
            }


            .center_conteudo ul.Dot_ListaProdutosULClass li.Dot_ListaProdutosLIClass span.produto_valorde {
   ...