JSFiddle - React, Tailwind, and code Playground

by martinschaer

HTML

<div class="ruler" style="width:220px;">220px</div>

<!-- ------------- -->
<!-- Version HTML5 -->
<!-- ------------- -->

<article>

<header>
    <h1>Título del artículo</h1>
</header>

<div class="texto">
    Lorem ipsum dolor sit amed.
</div>

</article>

<div class="ruler" style="width:176px;">176px</div>

<!-- -------------------------- -->
<!-- Version con tablas sin CSS -->
<!-- -------------------------- -->

<table cellspacing="0" cellpadding="0" width="100%" border="0">
    <tr>
        <td align="center">
            <table cellspacing="0" cellpadding="0" width="218" border="0" style="border:1px solid #aaa">
                <tr>
                    <td width="10" bgcolor="#aaa"></td>                        
                    <td bgcolor="#aaa"><h1>Título del artículo</h1></td>
                    <td width="10" bgcolor="#aaa"></td>
                </tr>
                <tr>
                    <td colspan="3">
                        <table cellspacing="10" cellpadding="10" width="100%">
                            <tr>
                                <td style="border: 1px dashed black" bgcolor="#ddd">Lorem ipsum dolor sit amed.</td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

CSS

article {
    border: 1px solid #aaaaaa;
    width: 218px; /* + border = 220 */
    margin: 0 auto;
}

header {
    width: 198px;
    padding: 0 10px;
    background-color: #aaaaaa;
    overflow: hidden;
}

h1 { font-size: 24px; }

.texto {
    border: 1px dashed black;
    margin: 10px;
    padding: 10px;
    width: 176px; /* + border + padding + margin = 218 */ 
    background-color: #dddddd;
}

.ruler {
    background-color: black;
    color: white;
    text-align: center;
    margin: 1em auto;
}