JSFiddle - React, Tailwind, and code Playground

by annndrewww

HTML

<footer class="footer">
      <div class="wrapper">
        <div class="footer_item">
          <div class="footer_logo">
            <img src="img/header-logo.svg" alt="logo">
            <p class="footer_logo_desc">
              Plan and book your perfect trip with 
              expert advice, travel tips destination
              information from us
            </p>
            <p class="footer_logo_mini_desc">©2020 Thousand Sunny. All rights reserved</p>
          </div>
        </div>

        <nav class="footer_nav">
          <ul class="footer_menu">
            <li class="footer_menu_item">
              <h3 href="#!" class="footer_menu_title">Destinations</h3>
            </li>
            <li class="footer_menu_item">
              <a href="#!" class="footer_menu_link">Africa</a>
            </li>
            <li class="footer_menu_item">
              <a href="#!" class="footer_menu_link">Antarctica</a>
            </li>
            <li class="footer_menu_item">
              <a href="#!" class="footer_menu_link">Asia</a>
            </li>
            <li class="footer_menu_item">
              <a href="#!" class="footer_menu_link">Europe</a>
            </li>
            <li class="footer_menu_item">
              <a href="#!" class="footer_menu_link">America</a>
            </li>
          </ul>

          <ul class="footer_menu">
            <li class="footer_menu_item">
              <h3 href="#!" class="footer_menu_title">Shop</h3>
            </li>
            <li class="footer_menu_item">
              <a href="#!" class="footer_menu_link">Destination Guides</a>
            </li>
            <li class="footer_menu_item">
              <a href="#!" class="footer_menu_link">Pictorial & Gifts</a>
            </li>
            <li class="footer_menu_item">
              <a href="#!" class="footer_menu_link">Special Offers</a>
            </li>
            <li class="footer_menu_item">
              <a href="#!" class="footer_menu_link">Delivery...

CSS

.footer {
  background: #F9F9FB;
  padding: 81px 0;
}

.wrapper {
  max-width: 1080px;
  margin: 0 auto;
}

.footer_logo_desc {
  font-style: normal;
  font-weight: 300;
  font-size: 18px;
  line-height: 28px;
  color: #848484;
  margin-top: 26px;
  margin-bottom: 60px;
}

.footer_logo_mini_desc {
  font-style: normal;
  font-weight: 300;
  font-size: 17px;
  color: #848484;
}

.footer_logo {
  width: 50%;
  float: left;
}

.footer_nav {
  display: flex;
  flex-wrap: wrap;
  float: right;
  width: 50%;
}

.footer_menu{
  padding-left: 30px;
  right: 0;
}

.footer_menu_item {
  padding-bottom: 12px;
}

.footer_menu_title {
  margin-bottom: 34px;
  font-style: normal;
  font-weight: bold;
  font-size: 19px;
  color: #000;
}

.footer_menu_link {
  font-style: normal;
  font-weight: 300;
  font-size: 18px;
  line-height: 27px;
  color: #848484;
  text-decoration: none;
}

.footer_menu_link:hover, .footer_menu_link:active, .footer_menu_link:focus {
  color: #636363;
}

.footer_hr {
  margin-top: 1000px;
  display: block;
  width: 100%;
  color: #C4C4C4;
}