JSFiddle - React, Tailwind, and code Playground

by EwertonRSilveira

HTML

<h1>Center dynamic box using only css test</h1>
<div class="container">
    <div class="center">
        <div class="center-container">
            <span class="dyn-box">
                <div class="dyn-head">This is a head</div>
                <div class="dyn-body">
                    <div>Some Content</div><br />
                    <button>Add More Content!</button><br /><br />
                </div>
            </span>
        </div>
    </div>
</div>

CSS

.container
            {
                position:absolute;
                left:0;right:0;top:0;bottom:0;
                overflow:hidden;
            }
            .center
            {
                position:absolute;
                left:50%; top:50%;
            }
            .center-container
            {
                position:absolute;
                left:-2500px;top:-2500px;
                width:5000px;height:5000px;
                line-height:5000px;
                text-align:center;
                overflow: hidden;
            }
            .dyn-box
            {
                display: inline-block;
                vertical-align: middle;
                line-height: 100%;

                /* Purely asthetic below this point */
                background: #808080;
                padding: 13px;
                border-radius: 11px;
                font-family: arial;
            }
            .dyn-head
            {
                background:red;
                color:white;
                min-width: 300px;
                padding: 20px;
                font-size: 23px;
            }
            .dyn-body
            {
                padding: 10px;
                background:white;
                color:red;
            }

JavaScript

$(function()
  {
      $('button').click(function(){
          $('.dyn-body').append('<div>More Content!</div><br/>');
      });      
  });