Flexbox Development Tutorials, Guides & Insights

.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 200px;
}

.flex-item {
  background-color: lightblue;
  padding: 20px;
}

<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
</div>

   npm init -y

Use npm to install Tailwind CSS and its peer dependencies:

• grid-template-columns: Defines the number and size of columns.
• grid-template-rows: Defines the number and size of rows.
• grid-template-areas: Defines named grid areas.

.grid-container {
  grid-template-columns: 200px 1fr 100px;
  grid-template-rows: 100px auto;
}