JSFiddle - React, Tailwind, and code Playground

by Константин Дралюк

HTML

<div class="attr-dropdown">
  //... content
  
  <div class="attr-dropdown__groups">
    <div class="attr-dropdown__group">
      <div class="attr-dropdown__group-title">...</div>
    
      <div class="attr-dropdown__option">
        Option Name
        <div class="attr-dropdown__option-tag">New</div>
      </div>
      ...
      
      <div class="attr-dropdown__custom">
        Custom <Input> Days
      </div>
    </div>
    
    <div class="attr-dropdown__group">
      <div class="attr-dropdown__group-title">...</div>
      
      <div class="attr-dropdown__option">...</div>
      ...
    </div>
  </div>
  
  <div class="attr-dropdown__footer">
    cancel, submit
  </div>
</div>

SASS

.attr-dropdown
  &__groups
    display: flex
  &__group
    width: 100%
    & + & 
      border-left: 1px solid #f00
  &__option
    min-width: 200px
    background: #ccc
    
  &__footer
    display: flex
    justify-content: flex-end