JSFiddle - React, Tailwind, and code Playground

by Maxim_Wolf

HTML

<section class="container">
  <artical class="card">
    <h3 class="card-title">
      Account Details
    </h3>
    <button type="button" class="card-cancel">
      Cancel
    </button>
    <button type="button" class="card-save">
      Save
    </button>
    <div class="card-value"><input type="text" value="Account Name"></div>
    <div class="card-value"><input type="text" value="Address"></div>
    <div class="card-value"><input type="text" value="City"></div>
    <div class="card-value"><input type="text" value="State/Province"><input type="text" class="card-zip"  value="Zip Code"></div>
    <div class="card-value"><input type="text" value="Country/Region"></div>
    <div class="card-value"><input type="text" value="Web site"></div>
  </artical>
  <artical class="card">
    <h3 class="card-title">
      Account Details
    </h3>
    <button type="button" class="card-edit">
      Edit
    </button>
    <div class="card-value">&lt;Account Name&gt;</div>
    <div class="card-value">&lt;Address&gt;</div>
    <div class="card-value">&lt;City&gt;</div>
    <div class="card-value">&lt;State/Province&gt; &lt;Zip Code&gt;</div>
    <div class="card-value">&lt;Country/Region&gt;</div>
    <div class="card-value">&lt;Website&gt;</div>
  </artical>
  <artical class="card">
    <h3 class="card-title">
      Account Details
    </h3>
    <button type="button" class="card-edit">
      Edit
    </button>
    <div class="card-value">&lt;Account Name&gt;</div>
    <div class="card-value">&lt;Address&gt;</div>
    <div class="card-value">&lt;City&gt;</div>
    <div class="card-value">&lt;State/Province&gt; &lt;Zip Code&gt;</div>
    <div class="card-value">&lt;Country/Region&gt;</div>
    <div class="card-value">&lt;Website&gt;</div>
  </artical>
  <artical class="card">
    <h3 class="card-title">
      Account Details
    </h3>
    <button type="button" class="card-edit">
      Edit
    </button>
    <div class="card-value">&lt;Account Name&gt;</div>
    <div...

CSS

body, html{
  background-color: rgb(237, 239, 240);
}
.container{
  display: grid;
  grid-template-columns:repeat(auto-fill, minmax(15em, 1fr));  
}
.card{
  display: grid;
  background-color:white;
  grid-template-columns: auto auto auto; 
  gap: 0.5em;
  align-items: center;
  border: 1px solid black;
  border-radius: 1em;
  padding: 1em;
  margin: 1em;
}
.card-value{
  grid-column: 1/-1;
}
.card-edit{
  padding: 0 1em;
  grid-column: 2/-1;
  
}
.card-cancel{
  padding: 0 1em;
  grid-column: 2;
}
.card-save{
  padding: 0 1em;
  grid-column: 3;
}
.card-title{
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  /*width: 7em;*/
  padding: 0;
}
.card-zip{
  max-width: 4em;
}