JSFiddle - React, Tailwind, and code Playground

by Angelos Chaidas

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.2/tailwind.min.css">
<html>
<head>
    <meta charset="UTF-8">
    <title>This is a tailwind showcase page!</title>
</head>
<body class="bg-gray-300 p-4 sm:bg-red-200">
    <h1 class="text-2xl font-bold mb-4">Hello Tailwind!</h1>    
    <p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, quos, inventore! Distinctio, doloribus, nostrum. Maiores culpa quis.
    <section class="md:flex md:space-x-4">
        <div class="bg-white p-4 rounded-lg mb-4 shadow-lg md:w-1/3">This is a box!</div>
        <div class="bg-white p-4 rounded-lg mb-4 shadow-lg md:w-1/3">This is a box!</div>
                <div class="bg-white p-4 rounded-lg mb-4 shadow-lg md:w-1/3">This is a box!</div>
    </section>
    <button class="bg-blue-500 py-2 px-4 rounded-lg text-white hover:bg-blue-800">Click me!</button>
    <div class="email-alert-form ea bg-adzuna-gray-100 border border-solid border-adzuna-gray-100 p-3 md:rounded-lg md:p-4">
    
    <div class="ea_form xl:flex xl:items-center">
        <input type="hidden" name="ea_serialised" value="%7B%22command%22%3A%5B%7B%22args%22%3A%22jobs%22%2C%22method%22%3A%22add_index%22%2C%22type%22%3A%22%22%7D%2C%7B%22args%22%3A%22%7B%5C%22form%5C%22%3A%5C%22what_c%5C%22%2C%5C%22freetext%5C%22%3A%5C%22Perl%20Developer%5C%22%2C%5C%22mode%5C%22%3A%5C%22phrase%5C%22%7D%22%2C%22method%22%3A%22add_freetext%22%2C%22type%22%3A%22HASH%22%7D%2C%7B%22args%22%3A%22%7B%5C%22field%5C%22%3A%5C%22location_id%5C%22%2C%5C%22value%5C%22%3A%5C%2286384%5C%22%7D%22%2C%22method%22%3A%22add_filter%22%2C%22type%22%3A%22HASH%22%7D%5D%7D">
        <input type="hidden" name="ea_title" value="Perl Developer  Jobs in London, UK">
        <label for="ea_srp_top" class="block text-sm mb-3 flex items-center md:mb-4 md:text-base flex-shrink-0 xl:mb-0 xl:mr-4">
            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 mr-1 md:w-8 md:h-8 md:mr-2">
...