JSFiddle - React, Tailwind, and code Playground

by drvy

HTML

<!-- Aqui tu while -->

<div class='item'>

    <div class='image'>
        <img src='http://goo.gl/HDXMUn' alt=''>
    </div>

    <div class='author'>

        <div class='author-img'>
            <img src='https://s3.amazonaws.com/uifaces/faces/twitter/rem/128.jpg' alt=''>
        </div>

        <div class='author-info'>
            <span class='title'>Porta tristi...</span>
            <span class='profile'>by <a href='#'>sandra</a>.</span>
        </div>

    </div>

    <div class='comments'>
        <span>2 comments, 4 likes</span>
    </div>

</div>


<div class='item'>

    <div class='image'>
        <img src='http://phyliciadelta.com/wp-content/uploads/2013/07/sandwich.jpg' alt=''>
    </div>

    <div class='author'>

        <div class='author-img'>
            <img src='https://s3.amazonaws.com/uifaces/faces/twitter/peterme/128.jpg' alt=''>
        </div>

        <div class='author-info'>
            <span class='title'>Rhconos e...</span>
            <span class='profile'>by <a href='#'>stella</a>.</span>
        </div>

    </div>

    <div class='comments'>
        <span>12 comments, 8 likes</span>
    </div>

</div>

<div class='item'>

    <div class='image'>
        <img src='http://phyliciadelta.com/wp-content/uploads/2013/07/sandwich.jpg' alt=''>
    </div>

    <div class='author'>

        <div class='author-img'>
            <img src='https://s3.amazonaws.com/uifaces/faces/twitter/peterme/128.jpg' alt=''>
        </div>

        <div class='author-info'>
            <span class='title'>Rhconos e...</span>
            <span class='profile'>by <a href='#'>stella</a>.</span>
        </div>

    </div>

    <div class='comments'>
        <span>12 comments, 8 likes</span>
    </div>

</div>

<div class='item'>

    <div class='image'>
        <img src='http://goo.gl/HDXMUn' alt=''>
    </div>

    <div class='author'>

        <div class='author-img'>
            <img src='https://s3.amazonaws.com/uifaces/faces/twitter/rem/128.jpg' alt=''>
 ...

CSS

.item {
    border: 1px solid #999;
    border-radius: 5px;
    box-shadow: 0px 0px 5px #ccc;
    display: inline-block;
    font-size: 0.8em;
    margin:5px;
    max-width: 200px;
}


    /* resetear */
    .item * { margin: 0; padding: 0; }

    .item .image, .item .author { padding: 5px; }

    /* Estilo de la imagen */
    .item .image img {
        border-radius: 3px;

        max-height: 170px;
        max-width: 170px;

        min-height: 170px;
        min-width: 170px;
    }

    /* Estilo del autor */
    .item .author { display: table; }

        /* Posicionamiento de  titulo, imagen y pefil del autor. */
        .item .author .author-img, .item .author .author-info {
            display: table-cell;
            padding:2px 3px 2px 0px;
            vertical-align: top;
        }

        /* Estilo imagen del autor */
        .item .author .author-img { }

            .item .author .author-img img {
                border-radius: 3px;
                height: 42px;
                width: 42px;
            }

        /* Estilo infomracion autor */
        .item .author .author-info {
            line-height: 1.7em;
            padding-left: 4px;
        }

            /* Estilo titulo de la imagen */
            .item .author .author-info .title {
                display: block;
                font-weight: 700;
                font-size: 1.2em;
            }

            /* Estilo nombre autor */
            .item .author .author-info .profile a {
                color: #069;
                font-weight: 700;
                text-decoration: underline;
            }

    /* Estilo comentarios */
    .item .comments {
        border-top: 1px solid #999;
        color: #444;
        padding: 5px;
        text-align: center;
    }