JSFiddle - React, Tailwind, and code Playground

by brikohler

HTML

<div>
        <div class="div-rectangle-main">
            <h1 class="main-title"> Lore lore lore!</h1>
            <div class="main-subtitle">
             Lore lore lore
              <p class="main-subsubtitle">Lore lore lore lore =)</p>
            </div>
        </div>
            <div class="flexbox-container">
              <div class="card-home-main" id="card1">
                <div class="card-img">
                <div class="section-icon-circle-card section-icon-circle-card--bot">
                    <img src="img/illustrations/Estrela-1.svg"/>
                </div>
                </div>
                <div class="card-info">
                  <div class="card-title">
                    <h3>B</h3>
                  </div>
                  <p class="card-text">Lore lore lore
                  <div class="card-icon">
                    <BlipIcon name="arrow-ball-down-solid" class="bp-fs-1 bp-fill-bot"></BlipIcon> 
                  </div>
                  <p class="card-text-mobile">lore lore lore </p>
                </div>
              </div>

              <div class="card-home-main" id="card2">
                <div class="card-img">
                <div class="section-icon-circle-card section-icon-circle-card--watermelon">
                    <img src="img/illustrations/Estrela-2.svg"/>
                </div>
                </div>
                <div class="card-info">
                  <div class="card-title">
                    <h3>C</h3>
                  </div>
                  <div class="card-icon">
                    <BlipIcon name="arrow-ball-down-solid" class="bp-fs-1 bp-fill-bot"></BlipIcon> 
                  </div>
                  <p class="card-text">lore lore lore lore </p>
                  <p class="card-text-mobile">lore lore lore 2 </p>
                </div>
              </div>
              <div class="card-home-main" id="card3">
                <div class="card-img">
                  <div...

CSS

@media only screen and (min-device-width: 2px) and (max-device-width: 736px) {

	.div-forum-ideas-text {
		display: none;
	}

	.div-forum-ideas .div-forum-ideas-forum-card {
		margin-left: 5.32%;
		width: 43.40%;
		height: 49.84%;
	}

	.div-rectangle-main{
		width: 100%;
		height: 100%;
		left: 100%;
		margin-top: -46px;
		background: linear-gradient(192deg, #3D4554 -10.36%, #242B36 45.63%, #1D1D1D 117.21%);
	}

	.div-rectangle-main .main-subtitle{
		font-family: Nunito Sans;
		font-style: normal;
		font-weight: normal !important;
		color: #FFFFFF;
		margin-top: 30px;
		margin-bottom: 100px !important;
		font-size: 1.25rem;
		line-height: 200%;
		text-align: center;
	}

	.div-rectangle-main .main-subtitle .main-subsubtitle{
		display: none;
	}

	.div-rectangle-main .main-title{
		padding-top: 10%;
	}
	
	.div-rectangle-main .main-logo{
		display: none !important;
	}
	
	.flexbox-container {
		flex-direction: column;
		flex-wrap: wrap;
		flex: 1 0 26%;
	}
	
	.flexbox-container .card-home-main:nth-of-type(1){
		margin-top: -12% !important;
		margin-left: 6% !important;
	}
	
	.flexbox-container .card-home-main{
		background: #FFFFFF;
		margin-top: 7% !important;
		width: 91% !important;
		height: 160px !important;
	}

	.div-forum-ideas .div-forum-ideas-ideas-card {
		margin-left: 51.28%;
		width: 43.40%;
		height: 49.84%;
	}

	.div-forum-ideas-forum-card .section-icon-circle-forum-ideas-card {
		margin-top: 14.28%;
		margin-left: 20%;
		float: none;
	}

	.div-forum-ideas-ideas-card .section-icon-circle-forum-ideas-card {
		margin-top: 14.28%;
		margin-left: 20%;
		float: none;
	}

	.div-forum-ideas-forum-card .div-forum-ideas-card-title {
		margin-left: auto;
		text-align: center;
	}

	.div-forum-ideas-ideas-card .div-forum-ideas-card-title {
		margin-left: auto;
		text-align: center;
	}

	.div-forum-ideas-card-text {
		display: none;
	}

	
	.card-home-main .card-img{
		height: 0%  !important;
		width: 0% !important;
		margin-left: 3% !important;
		margin-top: 9%...