JSFiddle - React, Tailwind, and code Playground

by Matteo Schiatti

HTML

<div id="mega-menu-projects" class="mega-menu-projects-wrap">
		<div class="mega-menu-prjects-row-1">
			<div class="mega-menu-projects-container">
				<div>
					<div class="mega-menu-proj-title-container">
            <span>Two lines Title Title </span>
           </div>
					<div class="mega-menu-projects-img-container">
            <a href="#">
              <img class="mega-menu-projects-img" src="http://www.micropress.co.uk/wp-content/uploads/2016/09/digital-printing-1-.jpg" alt="...">
            </a>
          </div>
					<div class="mega-menu-proj-name-container">
            <span class="small-text">Project</span>
          </div>
					<div class="mega-menu-proj-country-container">
            <span class="small-text">Country</span>
          </div>
				</div>
			</div>
			<div class="mega-menu-projects-container">
				<div>
					<div class="mega-menu-proj-title-container">
            <span>One line</span>
           </div>
					<div class="mega-menu-projects-img-container">
            <a href="#">
              <img class="mega-menu-projects-img" src="http://www.micropress.co.uk/wp-content/uploads/2016/09/digital-printing-1-.jpg" alt="...">
            </a>
          </div>
					<div class="mega-menu-proj-name-container">
            <span class="small-text">Project</span>
          </div>
					<div class="mega-menu-proj-country-container">
            <span class="small-text">Country</span>
          </div>
				</div>
			</div>
			<div class="mega-menu-projects-container">
				<div>
					<div class="mega-menu-proj-title-container">
            <span>One line</span>
           </div>
					<div class="mega-menu-projects-img-container">
            <a href="#">
              <img class="mega-menu-projects-img" src="http://www.micropress.co.uk/wp-content/uploads/2016/09/digital-printing-1-.jpg" alt="...">
            </a>
          </div>
					<div class="mega-menu-proj-name-container">
            <span class="small-text">Project</span>
         ...

CSS

.mega-menu-projects-wrap {
	position: absolute;
	z-index: 5000;
	background: #e4e7f7;
	right: 0;
	padding-top: 15px;
	padding-left: 15px;
	width: 80%;
	text-align: left;
}

.mega-menu-projects-container {
	vertical-align: top;
}

/*
.mega-menu-proj-title-container {
	min-height: 35px;
}
*/
.mega-menu-projects-wrap > div.mega-menu-prjects-row-1 {
	margin-left: 8px;
	margin-right: 8px;
}

.mega-menu-projects-wrap > div.mega-menu-prjects-row-1:nth-child(3) {
	margin-top: 18px;
	margin-bottom: 22px;
}

.mega-menu-projects-wrap > div.mega-menu-prjects-row-1 > div {
	padding: 12px 10px;
	display: inline-block;
	width: 24.3%;
}

.mega-menu-projects-wrap > div.mega-menu-prjects-row-1 > div > div {
	background-color: #fff;
	padding: 10px;
}

.mega-menu-projects-wrap > div.mega-menu-prjects-row-1 > div > div:hover {
	background-color: #76BD22;
	color: #fff;
}

.mega-menu-proj-title-container {
	padding-bottom: 10px;
	text-align: left;
}

.mega-menu-projects-img-container {
	text-align: center;
}

.mega-menu-projects-img {
	width: 100%;
}

.mega-menu-proj-name-container {
	text-align: left;
}

.mega-menu-proj-country-container {
	text-align: left;
}

.mega-menu-btn-container {
	text-align: center;
	padding-bottom: 30px;
	padding-top: 25px;
}

.mega-menu-btn-1 {
	margin-right: -20px;
  background-image: url(assets/img/home-page/button-blue-default.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  padding: 10px 60px;
  text-transform: uppercase;
  border-radius: initial;
  border: none;
  color: #fff;
}