JSFiddle - React, Tailwind, and code Playground

by anoopsuda

HTML

<footer class="contact-footer">
  <div class="contact-footer__inner">

    <!-- Logo -->
    <div class="footer-logo">
      <span>&gt;</span>
    </div>

    <!-- Contact text -->
    <div class="footer-contact">
      <h3>Contact Us</h3>
      <p>Our team is here to give you support</p>
    </div>

    <!-- Email -->
    <div class="footer-info">
      <div class="icon email"></div>
      <div>
        <h4>Email</h4>
        <p>myinnovation.support<br>@accenture.com</p>
      </div>
    </div>

    <!-- Time -->
    <div class="footer-info">
      <div class="icon time"></div>
      <div>
        <h4>Time</h4>
        <p>9:00 AM to 7:00 PM IST<br>Monday to Friday</p>
      </div>
    </div>

    <!-- Support -->
    <div class="footer-support">
      <h4>Support</h4>
      <div class="support-actions">
        <button>Raise a Ticket</button>
        <button>Raise a CR</button>
        <button>Innoverse</button>
      </div>
    </div>

  </div>
</footer>

SCSS

$bg: #000;
$text: #fff;
$muted: #bdbdbd;
$accent: #a100ff;
$border: rgba(255,255,255,.4);

.contact-footer {
  background: $bg;
  padding: 40px 60px;
  color: $text;

  &__inner {
    display: flex;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
  }
}

/* Logo */
.footer-logo {
  font-size: 48px;
  color: $accent;
  font-weight: bold;
}

/* Contact text */
.footer-contact {
  min-width: 260px;

  h3 {
    margin: 0 0 6px;
    font-size: 22px;
  }

  p {
    margin: 0;
    color: $muted;
    font-size: 14px;
  }
}

/* Email & Time blocks */
.footer-info {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 240px;

  h4 {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 500;
  }

  p {
    margin: 0;
    font-size: 14px;
    color: $muted;
    line-height: 1.4;
  }
}

/* Icons (placeholders – replace with SVGs if needed) */
.icon {
  width: 24px;
  height: 24px;
  border: 1px solid $accent;
  border-radius: 4px;

  &.email { }
  &.time { }
}

/* Support section */
.footer-support {
  margin-left: auto;

  h4 {
    margin: 0 0 10px;
    font-size: 16px;
  }
}

.support-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;

  button {
    background: transparent;
    color: $text;
    border: 1px solid $border;
    padding: 8px 18px;
    border-radius: 30px;
    cursor: pointer;
    font-size: 14px;
    transition: .2s;

    &:hover {
      border-color: $accent;
      color: $accent;
    }
  }
}

/* Responsive */
@media (max-width: 1024px) {
  .footer-support {
    margin-left: 0;
    width: 100%;
  }
}