JSFiddle - React, Tailwind, and code Playground

HTML

<div class="button">
        <button id="dsc" type="button" name="button">Dsc</button>
        <button id="asc" type="button" name="button">Asc</button>
    </div>
    <div class="wrapper">
        <div class="column">
            <div class="image">
                <div class="box red"></div>
                </div>
            </div>
            <div class="title">
                Product 1
            </div>
            <div class="price">
                <div class="value">
                    15
                </div>
            </div>
        </div>
        <div class="column">
            <div class="image">
                <img src="img/f2.png" alt="">
            </div>
            <div class="title">
                Product 2
            </div>
            <div class="price">
                <div class="value">
                    150
                </div>
            </div>
        </div>
        <div class="column">
            <div class="image">
                <img src="img/f3.png" alt="">
            </div>
            <div class="title">
                Product 3
            </div>
            <div class="price">
                <div class="value">
                    415
                </div>
            </div>
        </div>
        <div class="column">
            <div class="image">
                <img src="img/f4.png" alt="">
            </div>
            <div class="title">
                Product 4
            </div>
            <div class="price">
                <div class="value">
                    1100
                </div>
            </div>
        </div>
        <div class="column">
            <div class="image">
                <img src="img/f5.png" alt="">
            </div>
            <div class="title">
                Product 5
            </div>
            <div class="price">
                <div class="value">

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

CSS

.wrapper {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}
.column {
    width: 32%;
    float: left;
    margin-right: 1%;
    text-align: center;
    margin-bottom: 30px;
}
.value {
text-align: center;;
}
.button {
    text-align: center;
    margin-bottom: 30px;
}
body {
    padding: 50px;
}
.box {
  width:150px;
  height:150px;
  display:block;
}