JSFiddle - React, Tailwind, and code Playground

HTML

<div id="our_services" class="container">
    <div id="try">
        <div id="product1"></div>
        <div id="product2"></div>
        <div id="product3"></div>
    </div>
</div>

CSS

#our_services {
    height: 450px;
    text-align: center;
    font-family:"open_sans_hebrewregular", "alefregular", arial, "Times New Roman";
    color: black;
    background-color: rgb(224, 224, 224);
    overflow: auto;
    margin: auto;
}
#try {
    background-color:orange;
    width:50%;
    height:50%;
    margin:auto;
}
#product1 {
    display:inline-block;
    width: 30%;
    height: 75%;
    background-color:green;
    margin:5px;
}
#product2 {
    display:inline-block;
    width: 30%;
    height: 75%;
    background-color:pink;
    margin:5px;
}
#product3 {
    display:inline-block;
    width: 30%;
    height: 75%;
    background-color:blue;
    margin:5px;
}