JSFiddle - React, Tailwind, and code Playground

by CreativeDreams

HTML

<script src="https://kit.fontawesome.com/22189d81a7.js"></script>
<section>
  <div class="social-icons">
    <a href="#" class="fab fa-facebook-square">
    </a>

    <a href="#" class="fab fa-twitter-square">
    </a>

    <a href="#" class="fab fa-dribbble-square">
    </a>
    
    <a href="#" class="fab fa-facebook-square">
    </a>
  </div>
  
  <div>
    text widget
  </div>
  
  <button>
    Button
  </button>
</section>

CSS

section {
  display: flex;
  align-items: center;
  min-height: 80px;
  background: #ddd;
  /* max-width: 300px; */
  
  > * {
    &:not(:last-child) {
      margin-right: 20px;
    }
  }
}


.social-icons {
  display: grid;
  /* grid-template-columns: repeat(auto-fill, 30px); */
  /* grid-template-columns: repeat(3, 30px); */
  grid-auto-flow: column;
  grid-column-gap: 10px;
  flex-grow: 1;
  
  a {
    font-size: 30px;
    text-decoration: none;
  }
}