DEV Community

loading...
Cover image for 2nd Free Tailwind V2 Template.A one-page card to display your work and contact.

2nd Free Tailwind V2 Template.A one-page card to display your work and contact.

michaelandreuzza profile image michael-andreuzza ・2 min read

Hello Everyone!

I have decided to put out this one-page website for free, for those looking for work in case it helps.

I already made an extended website and posted here, on Dev, you can see it here

You can see it here:

» » https://wt007.netlify.app/

And download it here

» » https://www.wickedtemplates.com/demos

For those that have seen Wicked Templates before you will see it different now, I have redesigned it yesterday.

About the template

Ok, as mentioned is made with Tailwind CSS V2, no JS no nothing, nada is only the HTML but a whole Tailwind Configuration.

The left side-bar is fixed and the card is scrollable and Responsive!

I have extended:

  • typography size until 18rem.
  • Box shadow is different.
  • Blue, pink & purple are extended.

It includes:

  • 100% responsive
  • Purge CSS
  • Autoprefixer
  • CSS Nano
  • Post CSS
  • Text Shadow plugin ( because is cool bananas )
module.exports = {
  purge: {
    enabled: true,
    content: [
      './dist/**/*.html',
      './dist/*.html',
      './src/**/*.js',
    ],
  },
  darkMode: 'media', // or 'media' or 'class'
  theme: {
    extend: {
 textShadow: {

        'custom': '0 13.36px 8.896px #C3CCD8,0 -2px 1px #fff',
      },
      fontSize: {
        '10xl': '8rem',
        '11xl': '9rem',
        '12xl': '10rem',
        '13xl': '11rem',
        '14xl': '12rem',
        '15xl': '13rem',
        '16xl': '14rem',
        '17xl': '15rem',
        '18xl': '16rem',
        '19xl': '17rem',
        '20xl': '18rem',
      },
      boxShadow: {
         bright: '0 15px 15px -5px #EBEBFF',
        DEFAULT: '0 20px 20px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
      },
      height: {
        threescreen: '75vh',
        halfscreen: '50vh',
      },
      colors: {
        transparent: 'transparent',
        current: 'currentColor',
        black: colors.black,
        white: colors.white,
        gray: colors.coolGray,
        coolGray: colors.coolGray,
        blueGray: colors.blueGray,
        red: colors.red,
        orange: colors.orange,
        amber: colors.amber,
        yellow: colors.yellow,
        lime: colors.lime,
        green: colors.emerald,
        emerald: colors.emerald,
        teal: colors.teal,
        cyan: colors.cyan,
        lightBlue: colors.lightBlue,
        blue: colors.blue,
        indigo: colors.indigo,
        violet: colors.violet,
        purple: colors.violet,
        pink: colors.pink,
        fuchsia: colors.fuchsia,
        rose: colors.rose,
        pink: {
          1000: '#E8BDDF',
        },
        purple: {
          1000: '#683AC0',
        },

        blue: {
          1000: '#000A14',
        },


      }
    },
  },
  variants: {
    extend: {},
  },
  plugins: [
     require('tailwindcss-textshadow'),
  ],
};
Enter fullscreen mode Exit fullscreen mode

Hope you guys like it and use it.
Just feel free to do so.

Any questions reach me about on Twitter https://twitter.com/Mike_Andreuzza

Or ask me here!

Discussion (6)

pic
Editor guide
Collapse
matjones profile image
Mat Jones

You put a localhost link as the download link

Collapse
michaelandreuzza profile image
michael-andreuzza Author

palm face. Thank you for that matt!

Collapse
matjones profile image
Mat Jones

Haha no problem my dude

Thread Thread
michaelandreuzza profile image
Collapse
luispinheiro profile image
Luis Pinheiro

Nice description

Collapse
michaelandreuzza profile image