JSFiddle - React, Tailwind, and code Playground

HTML

<div class='flip-container' id='myCard'>
		<div class="flipper">
			<div class="front">
					<div class="backdrop">		
						<p>To start enter a URL below </p>
						<div class="form-group">
							<input type='text' class='form-control' id='url'/>
						</div>
						<button id='btnClick' class='btn btn-primary btn-lg btn-block' onClick="flip()">GO</button>
					</div>
			</div>
            <div class="back">
                <div class="backdrop">	
                    <div class="extra">
                        <p class='cent' id='finalURL'></p>
                    </div>
                </div>
            </div>
	</div>
</div>

CSS

.backdrop{
    background-color:pink;
}
.flip-container {
        -webkit-perspective: 1000;
        perspective: 1000; 
        padding:30px;
    }


    .flip-container.flip .flipper {
       -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }

    .flip-container, .front, .back {
       width: 100%;
       height: 100%; 
    }

    .flipper {
       -webkit-transition: 0.6s;
       -o-transition: 0.6s;
       transition: 0.6s;
       -webkit-transform-style: preserve-3d;
       transform-style: preserve-3d;
       position: relative; 
    }

    .front, .back {
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      position: absolute;
      top: 0;
      left: 0; }

     
      .front {
        z-index: 2; }

        .back {
          -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg); }

          .backdrop{
            background-color: #edeff1;
            padding: 24px 23px 20px;
            border-radius: 6px;
          }

JavaScript

$('#btnClick').click(function(){
    $('#myCard').toggleClass('flip');
});