https://blocks.wickedtemplates.com/

WICKEDBLOCKS.

WICKEDBLOCKS is a growing collection of more than 120 layout blocks and components built with Tailwind CSS V2. All are ready to copy paste to your Tailwind project.

Why WICKEDBLOCKS?

Because we ain't got time for that! Let's be productive and deploy our work even quicker.

Build status.

Superb, all working.

Code Style.

I have used Headwind for VS Code "as is", with no configuration, nothing, nada! The way to tidy up the classes is the original Headwing way of doing it, but I have probably messed up somewhere, because Headwind was quicker than me to move the class 1 or 2 spaces to left or right.

For example, this is a paragraph:

<p class="mb-8 text-base leading-relaxed text-center text-gray-700 lg:text-left lg:text-1xl">

              <!---- Text goes here ----->    
	      
</p>

Tech stack.

The blocks are only written with HTML and styled with Tailwind CSS V2 as it says on the site. For navigation, and some other blocks, I used Alpine.js because that's the point of it.

How to use WickedBlocks.

• Navigate to https://blocks.wickedtemplates.com/
• Choose the block/section that you need for your project.
• Visualize the markup, HTML by selecting the tab "code".
• Click on the copy icon.
• Paste into your project.

*Sections have the same padding, you can go ahead to change it to yours. I personally would recommend to use px-5 lg:px-20 or lg:px-24 on all your sections. so you can have a nice white space and consistence.

*Remember that sections contain comments when you copy them, be sure to remove the arrows wrapping the markup.

Example of a website layout using only these blocks can be found on this codepen.

• https://codepen.io/MichaelAndreuzza/pen/wvzpByO

Features.

Right now, what you can do is:

• View all 114 blocks.
• See the code for each and every one of them.
• Copy the code and use in your projects.

Too many, right? No way! More coming soon.

Upcoming Features.

• Responsive blocks.
• React code version.
• Vue code version.
• Preview in codepen.
• Open in Tailwind Play ( If Adam opens the API )
• Download the code.

Clone the source locally.

$ git clone https://github.com/michael-andreuzza/wickedblocks.git
$ cd wickedblocks

Install dependencies.

$ npm install
$ npm start

How to view live?

Navigate to the HTML file that you want see and it open it with the live browser, or simply open any and navigate through the live project.

Contribute.

Read how to Contributing.

License

Released under the MIT License Copyright 2021 Michael Andreuzza Twitter: @Mike_Andreuzza