JSFiddle - React, Tailwind, and code Playground

HTML

Aligning photos (with captions) in the center of a webpage using CSS

<!--VIDEO/PHOTO GALLERY-->
<div id="content">
    <a name="video/photo"></a>
    <br/>
    <h3>
    <a href="http://www.youtube.com/user/..." target="blank">Videos and Photo Gallery</a>
    </h3>
    <br/>
    <br/>
              
    <div class="containerVid">
        <div class="spacer23">
            
            <div class="floatingPic"><a href="http://www.youtube.com" target="blank">
            <img src="images/Play1.jpg" alt="image test 1" width="200" height="250"/></a>
            <br/>
            <p>Video Message, Caption 1</p>
            </div>
                  

            <div class="floatingPic"><a href="http://www.youtube.com" target="blank">
            <img src="images/Play2.jpg" alt="image test 2" width="200" height="250"/></a>
            <br/>
            <p>Video Message, Caption 2</p>
            </div>
                  
              
            <div class="floatingPic"><a href="http://www.youtube.com" target="blank">
            <img src="images/Play3.jpg" alt="image test 3" width="200" height="250"/></a>
            <br/>
            <p>Video Message, Caption 3</p>
            </div>
            
            <br/>
            <br/>
            
            
            <div class="floatingPic"><a href="http://www.youtube.com" target="blank">
            <img src="images/Play4.jpg" alt="image test 4" width="200" height="250"/></a>
            <br/>
            <p>Video Message, Caption 4</p>
            </div>
            
            <div class="floatingPic"><a href="http://www.youtube.com" target="blank">
            <img src="images/Play5.jpg" alt="image test 5" width="200" height="250"/></a>
            <br/>
            <p>Video Message, Caption 5</p>
            </div>
                
            
            <br/>
            <br/>
            
            <div class="floatingPic"><a href="http://www.youtube.com" target="blank">
            <img...

CSS

div.floatingPic          {display: inline-block;
                                 padding: 12px;}
                            
       div.floatingPic img      {border-radius: 10px;}
    
       div.floatingPic p        {text-align:center;
                                 color: #ffffff;
                                 font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;}

       div.containerVid     {border: 2px solid #99cc99;
                              background-color: #000000;
                              padding: 45px;
                              height: 25%;
                              border-radius: 10px;
                              margin-bottom: 25px;
                              text-align: center; }
                                  
        div.spacer23         {clear: both;}