JSFiddle - React, Tailwind, and code Playground

by basti1012

HTML

<!DOCTYPE HTML>
    <html>

    <head>
      <link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
      <meta charset="utf-8">
      <link rel="stylesheet" href="meinestyles.css">
      <style>
      
    </style>
    </head>

    <body>
      <div id="mywrapper">
        <header>
          <h1>Happy Birthday - Schriftzug</h1></header>
        <main>
          <section class="flex zwei_kasten">
    
          
          
 <article class="descripe col-66 article_eins">
              <h3>Happy Birthday - Schriftzug aus Folienballons 40 cm</h3>
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
</article>




<hr>

         
         
         
         
         
           <article class="col-33 info">
            <div>
                <div id="gal">
                  <a tabindex="0" href="#a2"><img src="https://www1.xup.in/exec/ximg.php?fid=62912263" alt="bild1" /> </a>
                  <a tabindex="0" href="#a2"><img src="https://www1.xup.in/exec/ximg.php?fid=32488638" alt="bild2" /> </a>
                  <a tabindex="0" href="#a3"><img src="https://www1.xup.in/exec/ximg.php?fid=27956506" alt="bild3" /> </a>
                  <a tabindex="0" href="#a4"><img src="https://www1.xup.in/exec/ximg.php?fid=16876045 " alt="bild4" /> </a>
                  <a tabindex="0" href="#a5"><img src="https://www1.xup.in/exec/ximg.php?fid=19429970" alt="bild5" /> </a>

                  <div id="ausgabe">
                    <img src="https://www1.xup.in/exec/ximg.php?fid=62912263" alt="bild1" />
                    <img src="https://www1.xup.in/exec/ximg.php?fid=32488638" alt="bild2" />
                    <img...

CSS

#mywrapper main * {
        margin: 0;
        padding: 0;
      }
 #mywrapper main , header , footer { width:100%; margin:0px  auto; padding:10px; font-family: 'Poiret One'; line-height:20px;  letter-spacing:1px; box-sizing:border-box;}     
      #mywrapper main,
      header,
      footer {
        margin: 0px auto;
        padding: 10px;
        font-family: 'Tahoma';
        line-height: 20px;
        letter-spacing: 1px;
        box-sizing: border-box;
      } 
      
      #mywrapper main {
        background:white;
      }
      
      #mywrapper header {
        background:white;
        color: Black;
        padding: 1em;

        font-weight: bold;
        text-align: center;
        border:0px solid grey;
      }
        
      #mywrapper section {
        padding: 10px 0;
        text-align: center;
      }
      hr{
        height:20px;
        width:100%;
        background:none;
      }

      #mywrapper article {
         margin: 0.5rem;
        
         flex-shrink: 0;
         flex-basis:49%;
         display: flex;
         flex-wrap: wrap;
         flex-direction: column;
height:auto;
        
        
        text-align: center;
        background: lightgrey;
        padding: 2px;
        margin-right: 10px;
        width:50%;
        font-weight: 400;
      }
      
      #mywrapper article h1 {
        font-size: 2vw;
        border: 1px solid grey;
        
      }
      

      #mywrapper article a {
        color: #8B4513;
        font-weight: bold;
      }
      
      #mywrapper .descripe h3 {
        padding: 10px;
        font-weight: bold;
        font-size: 1.2em;
      }
      
      #mywrapper h3 {
        padding: 10px;
        font-weight: bold;
        font-size: 1.8em;
        line-height: 2.0;
      }
      
      #mywrapper p {
        padding: 10px;
      }
      
      #mywrapper footer{
        padding: 10px;
        background: transparent;
        text-align: right;
        color: black;}
      
      #mywrapper...

JavaScript

.zwei_kasten{
  width:49%;
                  display: flex;
                flex-direction: column;
                }