fixes-jaredpalmer#3902

website/src/components/Footer.tsx

@@ -1,18 +1,18 @@
-import * as React from 'react';
 import Link from 'next/link';
+import * as React from 'react';
+import { siteConfig } from 'siteConfig';
 import { ExternalLink } from './ExternalLink';
 import { FormiumLogo } from './FormiumLogo';
-import { siteConfig } from 'siteConfig';
 export interface FooterProps {}
 
 export const Footer: React.FC<FooterProps> = props => {
  return (
- <div className="bg-gray-50 border-t border-gray-200">
- <div className="container mx-auto py-12 lg:py-16 px-4 lg:px-0 ">
+ <div className="border-t border-gray-200 bg-gray-50 lg:mx-4">
+ <div className="container px-4 py-12 mx-auto lg:py-16 lg:px-0 ">
  <div className="lg:grid lg:grid-cols-3 lg:gap-8">
- <div className="lg:grid lg:grid-cols-3 gap-8 lg:col-span-2">
+ <div className="gap-8 lg:grid lg:grid-cols-3 lg:col-span-2">
  <div className="mt-12 lg:mt-0">
- <h4 className="text-sm leading-5 font-semibold tracking-wider text-gray-400 uppercase">
+ <h4 className="text-sm font-semibold leading-5 tracking-wider text-gray-400 uppercase">
  Resources
  </h4>
  <ul className="mt-4">
@@ -60,7 +60,7 @@ export const Footer: React.FC<FooterProps> = props => {
  </ul>
  </div>
  <div className="mt-12 lg:mt-0">
- <h4 className="text-sm leading-5 font-semibold tracking-wider text-gray-400 uppercase">
+ <h4 className="text-sm font-semibold leading-5 tracking-wider text-gray-400 uppercase">
  Community
  </h4>
  <ul className="mt-4">
@@ -120,7 +120,7 @@ export const Footer: React.FC<FooterProps> = props => {
  </ul>
  </div>
  <div className="mt-12 lg:mt-0">
- <h4 className="text-sm leading-5 font-semibold tracking-wider text-gray-400 uppercase">
+ <h4 className="text-sm font-semibold leading-5 tracking-wider text-gray-400 uppercase">
  About Formium
  </h4>
  <ul className="mt-4">
@@ -160,10 +160,10 @@ export const Footer: React.FC<FooterProps> = props => {
  </div>
  </div>
  <div className="mt-8 lg:mt-0">
- <h4 className="text-sm leading-5 font-semibold tracking-wider text-gray-400 uppercase">
+ <h4 className="text-sm font-semibold leading-5 tracking-wider text-gray-400 uppercase">
  Subscribe to our newsletter
  </h4>
- <p className="mt-4 text-gray-500 text-base leading-6">
+ <p className="mt-4 text-base leading-6 text-gray-500">
  The latest Formik news, articles, and resources, sent to your
  inbox.
  </p>
@@ -178,26 +178,26 @@ export const Footer: React.FC<FooterProps> = props => {
  type="email"
  name="email"
  required={true}
- className="appearance-none w-full px-4 py-2 outline-none border border-gray-300 text-base leading-6 rounded-md text-gray-900 bg-white placeholder-gray-500 focus:outline-none focus:ring focus:ring-blue focus:border-blue-300 transition duration-150 ease-in-out lg:max-w-xs"
+ className="w-full px-4 py-2 text-base leading-6 text-gray-900 placeholder-gray-500 transition duration-150 ease-in-out bg-white border border-gray-300 rounded-md outline-none appearance-none focus:outline-none focus:ring focus:ring-blue focus:border-blue-300 lg:max-w-xs"
  placeholder="Enter your email"
  />
- <span className="mt-2 lg:mt-0 lg:ml-3 flex-shrink-0 inline-flex rounded-md shadow-sm">
+ <span className="inline-flex flex-shrink-0 mt-2 rounded-md shadow-sm lg:mt-0 lg:ml-3">
  <button
  type="button"
- className="inline-flex items-center px-4 py-2 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-blue-600 hover:bg-blue-500 focus:outline-none focus:border-blue-700 focus:ring focus:ring-blue active:bg-blue-700 transition ease-in-out duration-150"
+ className="inline-flex items-center px-4 py-2 text-base font-medium leading-6 text-white transition duration-150 ease-in-out bg-blue-600 border border-transparent rounded-md hover:bg-blue-500 focus:outline-none focus:border-blue-700 focus:ring focus:ring-blue active:bg-blue-700"
  >
  Notify me
  </button>
  </span>
  </form>
  </div>
  </div>
- <div className="mt-8 border-t border-gray-200 pt-8 lg:flex lg:items-center lg:justify-between">
- <div className="mt-8 text-base leading-6  lg:mt-0 lg:order-1">
+ <div className="pt-8 mt-8 border-t border-gray-200 lg:flex lg:items-center lg:justify-between">
+ <div className="mt-8 text-base leading-6 lg:mt-0 lg:order-1">
  <ExternalLink href="https://formium.io?utm_source=formik-site&utm_medium=footer-logo&utm_campaign=formik-website">
  <FormiumLogo />
  </ExternalLink>
- <div className="text-gray-400 text-xs pt-1">
+ <div className="pt-1 text-xs text-gray-400">
  Copyright &copy; 2020 Formium, Inc. All rights reserved.{' '}
  </div>
  </div>