JSFiddle - React, Tailwind, and code Playground

by nerdycap007

HTML

<z-footer class="bg-gradient-dark_dawn animate-gradient bg-400%" container="lg">
  <template slot="brand">
      <img class="max-w-none h-8" src="/main/company/logo" />
  </template>

  <template slot="desktop-menu">
    <z-footer-list class="pb-8 w-32 lg:w-auto">
      <template slot="heading">Product</template>
      <z-footer-list-item>
        Autofix
      </z-footer-list-item>
      <z-footer-list-item>
        Code formatter
      </z-footer-list-item>
    </z-footer-list>

    <z-footer-list class="pb-8 w-32 lg:w-auto">
      <template slot="heading">Company</template>
      <z-footer-list-item>
        About
      </z-footer-list-item>
      <z-footer-list-item>
        Customers
      </z-footer-list-item>
    </z-footer-list>
  </template>

  <template slot="mobile-menu">
    <z-footer-list type="accordion">
      <template slot="heading">Product</template>
      <z-footer-list-item>
        Autofix
      </z-footer-list-item>
    </z-footer-list>

    <z-footer-list type="accordion">
      <template slot="heading">Languages</template>
      <z-footer-list-item>
        For Python
      </z-footer-list-item>
      <z-footer-list-item>
        For Go
      </z-footer-list-item>
    </z-footer-list>
  </template>

  <template slot="desktop-extras">
    <!--   Anything extra on right side of footer, in desktop view -->
  </template>

  <template slot="mobile-extras">
    <!--   Anything extra on right side of footer, in mobile view -->
  </template>

  <template slot="copyright">
    <span class="block text-center lg:text-left">
      © 2020, DeepSource Corp. All rights reserved.
    </span>
  </template>

  <template slot="company">
    <span class="flex items-center mb-8 md:mb-0">
      Backed by
      <img class="ml-3 max-w-none" src="/some/company/logo" />
    </span>
  </template>
</z-footer>