https://blocks.wickedtemplates.com/

WICKEDBLOCKS.

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

Why WICKEDBLOCKS?

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

Buildt status.

Superb, all working.

Code Style.

I have used Headwind for VS Code "as is", no configuration, nothing, nada, so the way to tidy up the classes is the original Headwing way to do 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 written with only HTML and style with Tailwind CSS V2 as it says on the site...for navigation and other I used Alpine.js and because that's the point of them.

How to use WickedBlocks.

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

*The sections are having 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.

*The sections when you copy them are commented, remember to remove the arrows wrapping the markup.

Example of website layout using only the blocks on codepen.

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

Features.

Right now, what you can do is:

114 blocks.
See the code.
Copy the code to clipboard.

Too many, right? Comming more soon.

Upcoming Features.

Responsive.
React code version.
Vue code version.
Open in codepen.
Open in Tailwind Play ( If Adam opens the API )
Donwload code.

Clone the source locally.

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

Install depenencies.

$ npm install
$ npm start

How to open 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.

YutoSeta/wickedblocks