JSFiddle - React, Tailwind, and code Playground

by Kirubel Girma

HTML

<div class="di-my360">
  <div class="di-view"></div>
  <div class="di-title">The Sandpoint (Large)</div>
  <div class="di-sub" id="sub2">1 Bathroom	$1,701 657 Sq Ft</div>
  <div class="di-sub" id="sub1">Located in Seattle's sought after Ravenna neighborhood, MOD is a community landmark. Over the past several months, MOD has received a loving renovation and full-scale upgrades that protect its original character, while creating high-style, up-to-date studio and 1-bedroom apartments. This blend of legacy and modernity in a convenient in-city location is hard to find. Come discover what life at MOD is all about.</div>
</div>
<div></div>
<br>
<input class="inp-txt" type="text" value="">
<input class="inp-btn" type="button" value="Copy link">
<br>
<br>
<br>
<iframe class="di-view" height="253px" width="450px" src="" frameborder="0">
 
</iframe>

CSS

*{font-family:arial;}
.di-my360{width:450px;}
.di-view{background-color:black; height:253px; width:450px;}
.di-title{font-size:1.08em; padding-top:.5em;}
.di-sub{font-size:.75em;}
#sub2{font-size:.78em; padding-top:.3em;}
#sub1{font-size:.8em; padding-top:.6em;}
/*input types*/
.inp-txt {
    border: .03em solid black;
    padding: 0.4em;
    background-color:rgba(0, 0, 0, 0.1);
    color:#848484;
    font: 13px sans-serif
}
.inp-btn {
    border: .03em solid black;
    padding: 0.4em;
    color:#848484;
    font: 13px sans-serif;
    background-color:transparent;
}

.inp-btn:hover {
    border: .03em solid #619f1a;
    padding: 0.4em;
    color: #ffffff;
    font: 13px sans-serif;
    background-color: #8BC34A;
}