JSFiddle - React, Tailwind, and code Playground

HTML

<div class="containerhome1">
    <!-- End Slide Show -->
    
          <div class="col-md-4 col-sm-4 col-xs-12 suaboutlogo bottlez">

            <img type="button" value="submit" id="myBtn" alt="RBS bottle" title="RBS bottle" src="{{ site.baseurl }}/img/bot5.jpg" style="width: 100%; margin-bottom: 20px;" class="bottlex">
            <h2 align="center" class="title"><font size="5em">RBS Bottle</font></h2>
            <p align="center"> <font size="5em" color="#900028" style="font-weight: 700;">12Eur</p></font>

        </div>
        
        <div class="col-md-4 col-sm-4 col-xs-12 suaboutlogo bottlez">

            <img type="button" value="submit" id="myBtn1" alt="RBS Sweater" title="RBS Sweater" src="{{ site.baseurl }}/img/bot6.jpg" style="width: 100%; margin-bottom: 20px;" class="bottlex">
            <h2 align="center" class="title"><font size="5em">RBS Sweater</font></h2>
            <p align="center"> <font size="5em" color="#900028" style="font-weight: 700;">25Eur</p></font>

        </div>


<div id="myModal" class="modal">


	<div class="smallscreen">
  <!-- Modal content -->
  		<div class="modal-content small">
    		<div class="modal-header">
      <span id="close" class="close">&times;</span>
      <h2 align="center">RBS Bottle</h2>
    		</div>
    		<div class="modal-body">
      			<div class="smallmerch">


							 <img src="{{ site.baseurl }}/img/bot7.jpg" style="width:100%; margin-top: 20px;">
							 
							 
							 

						

							
			

				



<h2 align="center" class="title" style="margin-top: 30px;"><font size="5em">RBS Bottle</font></h2>
            <p align="center"> <font size="5em" color="#900028" style="font-weight: 700;">12Eur</p></font>

            <p style="padding-left: 20px; padding-right: 20px;"> The one and only bottle of Riga Business School serves a whopping amount of water, equal to 7 plastic glasses, available at RBS. Made from the highest quality materials with a cool white cap to top it off. </p>

             <p...

CSS

/**
 * Reset some basic elements
 */
body, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, hr,
dl, dd, ol, ul, figure {
    margin: 0;
    padding: 0;
}



/** Variables **********************************************/
$base-font-family:              Raleway, sans-serif;
$base-line-height:              1.5em;
$horizontal-spacing-unit:       50px;
$vertical-spacing-unit:         40px;
$nav-height:                    56px;

/* portfolio tinkering */
$img_spacing: 5px; 
$img_height: 275px;
$caption_font_size: 12px;
$caption_color: #aaa;

/* COLORS  */
$red:  #900028;
$orange: #F29105;
$blue: #2698BA;
$green: #11D68B;
$lime_green: #B7D12A;
$purple: #B509AC;


$grey-color-dark: #333;   /* footer */
$grey-color-light: #333;  /* navigation bar border */
$text-color:     #333;

/* Set theme color *************************/
$theme-color:   $red;


/************************************************************/

/**
 * Basic styling
 */
body {
    font-family: $base-font-family;
    font-size: $base-font-size;
    line-height: $base-line-height;
    font-weight: 400;
    color: $text-color;
    background-color: $background-color;
    -webkit-text-size-adjust: 100%;
}



/**
 * Set `margin-bottom` to maintain vertical rhythm
 */
p, blockquote, pre,
ul, ol, dl, figure,
%vertical-rhythm {
    margin-bottom: $vertical-spacing-unit / 2;
}

.alignright {
    float: right;
}


hr{
    /* Inset, by Dan Eden */
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);

}


/**
 * Figures
 */
figure > img {
    display: block;
}

figcaption {
    font-size: $small-font-size;
}



/**
 * Lists
 */
ul, ol {
    margin-left: $horizontal-spacing-unit;
}

li {
    > ul,
    > ol {
         margin-bottom: 0;
    }
}



/**
 * Headings
 */
h1, h2, h3, h4, h5, h6 {
    font-weight: 400;
}


/**
 * Links
 */
a {
    color: $text-color;
    text-decoration: none;
    /*
    &:visited {
        color: darken($brand-color,...

JavaScript

// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal

// Get the <span> element that closes the modal
var close = document.getElementById("close");

var bigclose = document.getElementById("bigclose");
// When the user clicks the button, open the modal 

  document.getElementById("myBtn").onclick = function() {
    modal.style.display = "block";
  }




// When the user clicks on <span> (x), close the modal
close.onclick = function() {
    modal.style.display = "none";
}

bigclose.onclick = function() {
    modal.style.display = "none";
}


// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}


//bilde merch beigas

// Get the modal
var modal1 = document.getElementById('myModal1');

// Get the button that opens the modal

// Get the <span> element that closes the modal
var close1 = document.getElementById("close1");

var bigclose1 = document.getElementById("bigclose1");
// When the user clicks the button, open the modal 

  document.getElementById("myBtn1").onclick = function() {
    modal1.style.display = "block";
  }




// When the user clicks on <span> (x), close the modal
close1.onclick = function() {
    modal1.style.display = "none";
}

bigclose1.onclick = function() {
    modal1.style.display = "none";
}


// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal1) {
        modal1.style.display = "none";
    }
}



//bilde merch beingas