JSFiddle - React, Tailwind, and code Playground

by kneidels

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<div class="container " id="main">
  <div class="row">
    <div class="col-12 col-md-6 text-center"> <img src="images/splash/logo.png" alt="Midreshet Harova" id="logo">
      <h2>ברוכות הבאות למדרשת הרובע</h2>
      <h2>Welcome to Midreshet Harova</h2>
      <div class="buttons"> <a href="https://harova.levit.dev/" class="but_eng">The Overseas Program</a></div>
      <div class="buttons"> <a href="/hebrew" class="but_heb">לתוכנית הישראלית</a> </div>
    </div>
    <div class="col-12 col-md-6" id="pics">
      <div class="row picset">
        <div class="col-12 col-md-6 text-center picitem pic1"> </div>
        <div class="col-12 col-md-6 text-center picitem pic2"> </div>
    
        <div class="col-12 col-md-6 text-center picitem pic3"> </div>
        <div class="col-12 col-md-6 text-center picitem pic4"> </div>
      </div>
    </div>
  </div>
</div>

CSS

div { border: 1px solid #000;}

.picitem {
height: 200px;
	border: 5px solid #fff;
	/*width: 45% !important;*/
	overflow: hidden;
	border-radius: 25px;
	padding: 0px;
	background:  no-repeat center center ;
	background-size: cover;
}

.pic1 { background-image: url("http://harova.org/images/splash/i2.jpg");}
.pic2 { background-image: url("http://harova.org/images/splash/e1.jpg");}
.pic3 { background-image: url("http://harova.org/images/splash/e2.jpg");}
.pic4 { background-image: url("http://harova.org/images/splash/i1.jpg");}