JSFiddle - React, Tailwind, and code Playground

by fritzdenim

HTML

<div id="portfolio">
    <div class="row">
        <ul>
            <li class="portfolio-item">
                <div class="image">Video</div>
                <div class="title">title</div>
            </li>
            <li class="portfolio-item">
                <div class="image">pretty Photo</div>
                <div class="title">title</div>
            </li>
            <li class="portfolio-item">
                <div class="image">If there is an image</div>
                <div class="title">title</div>
            </li>
        </ul>
    </div>
</div>

CSS

.row {
    float: left;
    width: 500px;
    background-color: #FF8C69;
}
.portfolio-item{
    float: left;
    border: 1px solid #afafaf;
    margin:1px;
}
.portfolio-item .image {
    border: 1px solid #afafaf;
    float: left;
    height: 80px;
    margin: 2px;
    whitespace:no-wrap;
}
.portfolio-item .title {
    background-color: #8a8a8a;
    color: white;
    padding: 5px;
}
.color {
    float: left;
    width: 10px;
    height: 100px;
    background-color: red;
    margin: 5px;
}

JavaScript

var max = 6;
var min = 1;
var position= Math.floor(Math.random()*(max-min))+min;
var color = blue;

$("#portfolio").prepend(position);

$(".row ul li.portfolio-item:nth-child(2n)").after("<p>This</p>");
/*
function randombox(position, color) {
    $('ul li:nth-child(4n)').after('<li class="clear">This is what I want to add</li>')
}
*/