JSFiddle - React, Tailwind, and code Playground

by dledle2

HTML

<div class="gallerycard">
     <div id="girlname">Akulina</div>
    <div id="girlinfo">N/A</div>
</div>

<div class="gallerycard">
     <div id="girlname">Martina</div>
    <div id="girlinfo">N/A</div>
</div>

<div class="gallerycard">
     <div id="girlname">Samantha</div>
    <div id="girlinfo">N/A</div>
</div>

<div class="gallerycard">
     <div id="girlname">Karen</div>
    <div id="girlinfo">N/A</div>
</div>

<div class="gallerycard">
     <div id="girlname">Jodie</div>
    <div id="girlinfo">N/A</div>
</div>

<div class="gallerycard">
     <div id="girlname">Sophie</div>
    <div id="girlinfo">N/A</div>
</div>

<div class="gallerycard">
     <div id="girlname">Olivia</div>
    <div id="girlinfo">N/A</div>
</div>

<div class="gallerycard">
     <div id="girlname">Leigh</div>
    <div id="girlinfo">N/A</div>
</div>

<div class="gallerycard">
     <div id="girlname">Kimberly</div>
    <div id="girlinfo">N/A</div>
</div>

CSS

.gallerycard {
	margin: 8px;
	float: left;
	height: 150px;
	width: 221px;
	background-color: rgba(0, 0, 0, .3);
	border-radius: 8px;
}
#girlname {
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 18px;
	color: #FFF;
	float: left;
	height: 30px;
	width: 221px;
	font-weight: bold;
	margin-top: 5px;
	text-align: center;
}
#girlinfo {
	font-family: Tahoma, Geneva, sans-serif;
	font-weight: bold;
	color: #FFF;
	text-align: center;
	float: left;
	height: 25px;
	width: 150px;
	margin-top: 7px;
}

JavaScript

var cards = $(".gallerycard");
for(var i = 0; i < cards.length; i++){
    var target = Math.floor(Math.random() * cards.length -1) + 1;
    var target2 = Math.floor(Math.random() * cards.length -1) +1;
    cards.eq(target).before(cards.eq(target2));
}