JSFiddle - React, Tailwind, and code Playground

by monica_a

HTML

<!DOCTYPE html>
<html>
<head>
<head>
	<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div class="tilecontainer">
  <div class="tilerow"> <!-- row 1 -->
    <div class="tileholder"><img src="https://www.w3schools.com/html/pic_trulli.jpg" class="tileimage"></div>
    <div class="tileholder"><img src="https://www.w3schools.com/html/pic_trulli.jpg" class="tileimage"></div>
    <div class="tileholder"><img src="https://www.w3schools.com/html/pic_trulli.jpg" class="tileimage"></div>
    <div class="tileholder"><img src="https://www.w3schools.com/html/pic_trulli.jpg" class="tileimage"></div>
    <div class="tileholder"><img src="https://www.w3schools.com/html/pic_trulli.jpg" class="tileimage"></div>
  </div>

  <div class="tilerow"> <!-- row 2 -->
    <div class="tileholder"><img src="https://www.w3schools.com/html/pic_trulli.jpg" class="tileimage"></div>
    <div class="tileholder"><img src="https://www.w3schools.com/html/pic_trulli.jpg" class="tileimage"></div>
    <div class="tileholder"><img src="https://www.w3schools.com/html/pic_trulli.jpg" class="tileimage"></div>
    <div class="tileholder"><img src="https://www.w3schools.com/html/pic_trulli.jpg" class="tileimage"></div>
    <div class="tileholder"><img src="https://www.w3schools.com/html/pic_trulli.jpg" class="tileimage"></div>
  </div>

  <div class="tilerow"> <!-- row 3 -->
    <div class="tileholder"><img src="https://www.w3schools.com/html/pic_trulli.jpg" class="tileimage"></div>
    <div class="tileholder"><img src="https://www.w3schools.com/html/pic_trulli.jpg" class="tileimage"></div>
    <div class="tileholder"><img src="https://www.w3schools.com/html/pic_trulli.jpg" class="tileimage"></div>
    <div class="tileholder"><img src="https://www.w3schools.com/html/pic_trulli.jpg" class="tileimage"></div>
    <div class="tileholder"><img src="https://www.w3schools.com/html/pic_trulli.jpg" class="tileimage"></div>
  </div>
</div>

</body>
</head>
</html>

CSS

/*Container for all tiles*/
.tilecontainer {
  overflow: scroll;
}

.tilerow {
    display: block;
    overflow: hide;
}

/*Defines the space a single tile takes up*/
.tileholder {
  display: table-cell;
  background-color: powderblue;
  overflow: hide;
  width: 100px;
  height: 100px;
}


/* image representation of a tile */
.tileimage {
	width: 100px;
	height: 100px;
}