JSFiddle - React, Tailwind, and code Playground

by Imri Paloja

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<!-- .container is main centered wrapper -->
<div class="container">

  <!-- columns should be the immediate child of a .row -->
  <div class="row">
    <div class="two columns">
      <p>auto</p>
      <img src="https://dev.eurobytes.eu/img/applications/BookStack/books-view/books-view-w360.avif" alt="Auto Rendering" class="auto">
    </div>
    <div class="two columns">
      <p>smooth</p>
      <img src="https://dev.eurobytes.eu/img/applications/BookStack/books-view/books-view-w360.avif" alt="smooth" class="smooth">
    </div>
    <div class="two columns">
      <p>
        high-quality
      </p>
      <img src="https://dev.eurobytes.eu/img/applications/BookStack/books-view/books-view-w360.avif" alt="high-quality" class="high-quality">
    </div>
    <div class="two columns">
      <p>
        crisp-edges
      </p>
      <img src="https://dev.eurobytes.eu/img/applications/BookStack/books-view/books-view-w360.avif" alt="Crisp Edges" class="crisp-edges">
    </div>
    <div class="two columns">
      <p>
        pixelated
      </p>
      <img src="https://dev.eurobytes.eu/img/applications/BookStack/books-view/books-view-w360.avif" alt="Pixelated Rendering" class="pixelated">
    </div>
  </div>

</div>

<!-- <div class="container">


  columns should be the immediate child of a .row
  <div class="row">

    <p>
      Image Renderings:
    </p>

    <div class="one column">

      <p>auto</p>
      <img src="https://dev.eurobytes.eu/img/favicon-w360.avif" alt="Auto Rendering" class="auto">

    </div>
    <div class="one column">

      <p>smooth</p>
      <img src="https://dev.eurobytes.eu/img/favicon-w360.avif" alt="smooth" class="smooth">


    </div> -->

<!--     <div class="one columns">
    
      <p>
        high-quality
      </p>
      <img...

CSS

.container {
  margin-top: 5%;
}

html,
body {
  color: #454545;
}

.container .row {
  border: 1px solid #CCCCCC;
  background: #F9F9F9;
  padding: 20px 30px;
}

.container .row .columns {
  border: 1px solid #CCCCCC;
  background: #EEEEEE;
  text-align: center;
}

.auto {
  image-rendering: auto;
}

img {
  width: 100%;
}

.smooth {
  image-rendering: smooth;
}

.high-quality {
  image-rendering: high-quality;
}

.crisp-edges {
  image-rendering: crisp-edges;
}

.pixelated {
  image-rendering: pixelated;
}