Published on

A Complete Guide To Build A Gokemon Template With Tailwind CSS

Tags
InputsPages
Gokemon Template

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that focuses on creating personalized user interfaces quickly. It can gives you all the building blocks you are able to create personalized designs without having to fight to override irritating opinionated styles. Also, Tailwind CSS is a highly configurable, low-level CSS framework.

The description of Gokemon Template ui component

Pokestats in golang : gokemon.herokuapp.com/

Why use Tailwind CSS to make a Gokemon Template ui component?

  • It can make the building process of Gokemon Template ui component faster and more easily.
  • Enables building complex responsive layouts and components freely.
  • Minimum lines of CSS code in Gokemon Template component file.

The preview of Gokemon Template ui component

Free download of the Gokemon Template's source code

The source code of Gokemon Template ui component

<style>
    @import url('https://fonts.googleapis.com/css2?family=Oswald:[email protected]&display=swap');

    body {
        font-family: 'Oswald', sans-serif;
    }

    .pokeball {
        -webkit-animation-name: spinner;
        animation-name: spinner;
        -webkit-animation-duration: 6s;
        animation-duration: 6s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear
    }

    @-webkit-keyframes spinner {
        83.33% {
            -webkit-transform: rotate(0);
            transform: rotate(0)
        }

        100% {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg)
        }
    }

    @keyframes spinner {
        83.33% {
            -webkit-transform: rotate(0);
            transform: rotate(0)
        }

        100% {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg)
        }
    }

    dialog[open] {
        animation: appear .15s cubic-bezier(0, 1.8, 1, 1.8)
    }

    dialog::backdrop {
        background: linear-gradient(45deg, rgba(0, 0, 0, .5), rgba(54, 54, 54, .5));
        backdrop-filter: blur(3px)
    }

    @keyframes appear {
        from {
            opacity: 0;
            transform: translateX(-3rem)
        }

        to {
            opacity: 1;
            transform: translateX(0)
        }
    }
</style>

<body class="bg-gray-100">
    <div class="container w-full md:max-w-3xl mx-auto flex flex-col min-h-screen">

        <a href="/" class="flex justify-center p-4 md:p-0 mt-10 md:mt-4">
            <img class="rounded-full gokemon"
                src="https://github.com/ahampriyanshu/gokemon/raw/master/assets/img/gokemon.png" alt="GokemonLogo" />
        </a>

        <div class="flex-grow">


            <div class="pt-0 pb-5 md:pt-10 md:pb-5 mx-4">
                <form action="/search" method="GET">
                    <div class="bg-white flex items-center rounded-lg shadow-md md:shadow-xl">
                        <input autofocus placeholder="Pikachu" type="search" name="q"
                            class="rounded-l-full w-full py-4 px-6 text-gray-700 leading-tight focus:outline-none"
                            id="search" type="text" placeholder="Search">
                        <div class="p-2 md:p-4">
                            <button
                                class="rounded-full focus:outline-none w-10 h-12 md:w-10 md:h-12 flex items-center justify-center">
                                <img src="https://github.com/ahampriyanshu/gokemon/raw/master/assets/img/pokeball.png"
                                    class="pokeball" alt="pokeball" />
                            </button>
                        </div>
                    </div>
                </form>
            </div>


            <div class="text-center mt-4">
                <p class="text-2xl text-gray-600">Pikachu
                </p>
                <p class="text-sm text-gray-600 mt-1">electric
                </p>
            </div>
            <div class="flex justify-center mt-4">
                <img onclick="document.getElementById('statsModal').showModal()" id="btn" class="w-24 h-24 rounded-full"
                    src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/25.png"
                    alt="Avatar" />
            </div>
            <div class="flex pb-5 justify-center flex-row space-x-8 md:space-x-24 mt-3 md:mt-6 text-center ">

                <div>
                    <p class="text-gray-700 font-bold">4
                    </p>
                    <p class="text-xs mt-2 text-gray-600">Height
                    </p>
                </div>
                <div>
                    <p class="text-gray-700 font-bold">112
                    </p>
                    <p class="text-xs mt-2 text-gray-600">Experience
                    </p>
                </div>
                <div>
                    <p class="text-gray-700 font-bold">60
                    </p>
                    <p class="text-xs mt-2 text-gray-700">Weight
                    </p>
                </div>
            </div>
        </div>


        <div class="flex pb-5 px-3 justify-center m-auto text-gray-800 text-sm flex-col
           md:flex-row max-w-6xl">
            <div class="flex justify-center mt-4">
                <a href="https://twitter.com/ahampriyanshu" class="w-6 mx-1">
                    <svg class="fill-current cursor-pointer text-gray-500 hover:text-blue-400" width="100%"
                        height="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"
                        xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"
                        xmlns:serif="http://www.serif.com/"
                        style="fill-rule: evenodd; clip-rule: evenodd; stroke-linejoin: round; stroke-miterlimit: 2;">
                        <path id="Twitter" d="M24,12c0,6.627 -5.373,12 -12,12c-6.627,0 -12,-5.373 -12,-12c0,-6.627
                       5.373,-12 12,-12c6.627,0 12,5.373 12,12Zm-6.465,-3.192c-0.379,0.168
                       -0.786,0.281 -1.213,0.333c0.436,-0.262 0.771,-0.676
                       0.929,-1.169c-0.408,0.242 -0.86,0.418 -1.341,0.513c-0.385,-0.411
                       -0.934,-0.667 -1.541,-0.667c-1.167,0 -2.112,0.945 -2.112,2.111c0,0.166
                       0.018,0.327 0.054,0.482c-1.754,-0.088 -3.31,-0.929
                       -4.352,-2.206c-0.181,0.311 -0.286,0.674 -0.286,1.061c0,0.733 0.373,1.379
                       0.94,1.757c-0.346,-0.01 -0.672,-0.106 -0.956,-0.264c-0.001,0.009
                       -0.001,0.018 -0.001,0.027c0,1.023 0.728,1.877 1.694,2.07c-0.177,0.049
                       -0.364,0.075 -0.556,0.075c-0.137,0 -0.269,-0.014 -0.397,-0.038c0.268,0.838
                       1.048,1.449 1.972,1.466c-0.723,0.566 -1.633,0.904 -2.622,0.904c-0.171,0
                       -0.339,-0.01 -0.504,-0.03c0.934,0.599 2.044,0.949 3.237,0.949c3.883,0
                       6.007,-3.217 6.007,-6.008c0,-0.091 -0.002,-0.183 -0.006,-0.273c0.413,-0.298
                       0.771,-0.67 1.054,-1.093Z"></path>
                    </svg>
                </a>
                <a href="http://www.github.com/ahampriyanshu" class="w-6 mx-1">
                    <svg class="fill-current cursor-pointer text-gray-500 hover:text-black" width="100%" height="100%"
                        viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"
                        xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"
                        xmlns:serif="http://www.serif.com/" style="
               fill-rule: evenodd;
               clip-rule: evenodd;
               stroke-linejoin: round;
               stroke-miterlimit: 2;
             ">
                        <path
                            d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
                    </svg>
                </a>
                <a href="https://www.linkedin.com/in/ahampriyanshu/" class="w-6 mx-1">
                    <svg class="fill-current cursor-pointer text-gray-500 hover:text-blue-500" width="100%"
                        height="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"
                        xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"
                        xmlns:serif="http://www.serif.com/"
                        style="fill-rule: evenodd; clip-rule: evenodd; stroke-linejoin: round; stroke-miterlimit: 2;">
                        <path id="Shape" d="M7.3,0.9c1.5,-0.6 3.1,-0.9 4.7,-0.9c1.6,0 3.2,0.3 4.7,0.9c1.5,0.6 2.8,1.5
                       3.8,2.6c1,1.1 1.9,2.3 2.6,3.8c0.7,1.5 0.9,3 0.9,4.7c0,1.7 -0.3,3.2
                       -0.9,4.7c-0.6,1.5 -1.5,2.8 -2.6,3.8c-1.1,1 -2.3,1.9 -3.8,2.6c-1.5,0.7
                       -3.1,0.9 -4.7,0.9c-1.6,0 -3.2,-0.3 -4.7,-0.9c-1.5,-0.6 -2.8,-1.5
                       -3.8,-2.6c-1,-1.1 -1.9,-2.3 -2.6,-3.8c-0.7,-1.5 -0.9,-3.1 -0.9,-4.7c0,-1.6
                       0.3,-3.2 0.9,-4.7c0.6,-1.5 1.5,-2.8 2.6,-3.8c1.1,-1 2.3,-1.9
                       3.8,-2.6Zm-0.3,7.1c0.6,0 1.1,-0.2 1.5,-0.5c0.4,-0.3 0.5,-0.8 0.5,-1.3c0,-0.5
                       -0.2,-0.9 -0.6,-1.2c-0.4,-0.3 -0.8,-0.5 -1.4,-0.5c-0.6,0 -1.1,0.2
                       -1.4,0.5c-0.3,0.3 -0.6,0.7 -0.6,1.2c0,0.5 0.2,0.9 0.5,1.3c0.3,0.4 0.9,0.5
                       1.5,0.5Zm1.5,10l0,-8.5l-3,0l0,8.5l3,0Zm11,0l0,-4.5c0,-1.4 -0.3,-2.5
                       -0.9,-3.3c-0.6,-0.8 -1.5,-1.2 -2.6,-1.2c-0.6,0 -1.1,0.2 -1.5,0.5c-0.4,0.3
                       -0.8,0.8 -0.9,1.3l-0.1,-1.3l-3,0l0.1,2l0,6.5l3,0l0,-4.5c0,-0.6 0.1,-1.1
                       0.4,-1.5c0.3,-0.4 0.6,-0.5 1.1,-0.5c0.5,0 0.9,0.2 1.1,0.5c0.2,0.3 0.4,0.8
                       0.4,1.5l0,4.5l2.9,0Z"></path>
                    </svg>
                </a>
                <a href="https://www.instagram.com/ahampriyanshu/" class="w-6 mx-1">
                    <svg class="fill-current cursor-pointer text-gray-500 hover:text-pink-500" width="100%"
                        height="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"
                        xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"
                        xmlns:serif="http://www.serif.com/" style="
               fill-rule: evenodd;
               clip-rule: evenodd;
               stroke-linejoin: round;
               stroke-miterlimit: 2;
             ">
                        <path
                            d="M14.829 6.302c-.738-.034-.96-.04-2.829-.04s-2.09.007-2.828.04c-1.899.087-2.783.986-2.87 2.87-.033.738-.041.959-.041 2.828s.008 2.09.041 2.829c.087 1.879.967 2.783 2.87 2.87.737.033.959.041 2.828.041 1.87 0 2.091-.007 2.829-.041 1.899-.086 2.782-.988 2.87-2.87.033-.738.04-.96.04-2.829s-.007-2.09-.04-2.828c-.088-1.883-.973-2.783-2.87-2.87zm-2.829 9.293c-1.985 0-3.595-1.609-3.595-3.595 0-1.985 1.61-3.594 3.595-3.594s3.595 1.609 3.595 3.594c0 1.985-1.61 3.595-3.595 3.595zm3.737-6.491c-.464 0-.84-.376-.84-.84 0-.464.376-.84.84-.84.464 0 .84.376.84.84 0 .463-.376.84-.84.84zm-1.404 2.896c0 1.289-1.045 2.333-2.333 2.333s-2.333-1.044-2.333-2.333c0-1.289 1.045-2.333 2.333-2.333s2.333 1.044 2.333 2.333zm-2.333-12c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6.958 14.886c-.115 2.545-1.532 3.955-4.071 4.072-.747.034-.986.042-2.887.042s-2.139-.008-2.886-.042c-2.544-.117-3.955-1.529-4.072-4.072-.034-.746-.042-.985-.042-2.886 0-1.901.008-2.139.042-2.886.117-2.544 1.529-3.955 4.072-4.071.747-.035.985-.043 2.886-.043s2.14.008 2.887.043c2.545.117 3.957 1.532 4.071 4.071.034.747.042.985.042 2.886 0 1.901-.008 2.14-.042 2.886z" />
                    </svg>
                </a>
            </div>
        </div>
        <dialog id="statsModal" class="h-auto w-11/12 md:w-1/2 p-5  bg-white rounded-md ">

            <div class="flex flex-col w-full h-auto ">
                <div class="flex w-full h-auto justify-center items-center">
                    <div class="flex w-10/12 h-auto py-3 justify-center items-center text-2xl font-bold">
                        Thank You
                    </div>
                    <div onclick="document.getElementById('statsModal').close();"
                        class="flex w-1/12 h-auto justify-center cursor-pointer">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                            stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                            class="feather feather-x">
                            <line x1="18" y1="6" x2="6" y2="18"></line>
                            <line x1="6" y1="6" x2="18" y2="18"></line>
                        </svg>
                    </div>
                </div>
                <div style="font-family: PokeSolid"
                    class="flex font-bold w-full h-auto py-10 px-2 justify-center
                 flex-col md:flex-row space-x-0 space-y-5 md:space-y-0 md:space-x-24 bg-gray-200 rounded text-center text-gray-700">
                    <a href="https://pokeapi.co/">
                        PokeAPI
                    </a>
                    <a href="https://github.com/mtslzr">
                        mtslzr
                    </a>
                    <a href="http://www.flaticon.com/free-icon/sushi_187463#term=sushi&page=1&position=68">
                        FlatIcon
                    </a>
                    <a href="https://www.heroku.com/">
                        Heroku
                    </a>
                </div>
            </div>
        </dialog>
    </div>
</body>

How to make a Gokemon Template with Tailwind CSS?

Install tailwind css of verion 3.0.18

Use the script html tag to import the script of Tailwind CSS of the version 3.0.18

<script src="https://cdn.tailwindcss.com"></script>

All the unility class needed to make a Gokemon Template component

  • bg-gray-100
  • w-full
  • md:max-w-3xl
  • mx-auto
  • flex
  • flex-col
  • min-h-screen
  • p-4
  • md:p-0
  • mt-10
  • md:mt-4
  • flex-grow
  • pt-0
  • pb-5
  • md:pt-10
  • md:pb-5
  • mx-4
  • bg-white
  • py-4
  • px-6
  • text-gray-700
  • p-2
  • md:p-4
  • w-10
  • h-12
  • md:w-10
  • md:h-12
  • text-center
  • mt-4
  • text-2xl
  • text-gray-600
  • text-sm
  • mt-1
  • w-24
  • h-24
  • flex-row
  • mt-3
  • md:mt-6
  • text-xs
  • mt-2
  • px-3
  • m-auto
  • text-gray-800
  • md:flex-row
  • max-w-6xl
  • w-6
  • mx-1
  • text-gray-500
  • hover:text-blue-400
  • hover:text-black
  • hover:text-blue-500
  • hover:text-pink-500
  • h-auto
  • w-11/12
  • md:w-1/2
  • p-5
  • w-10/12
  • py-3
  • w-1/12
  • py-10
  • px-2
  • bg-gray-200

62 steps to make a Gokemon Template component with Tailwind CSS

  1. Control the background color of an element to gray-100 using the bg-gray-100 utilities.

  2. Use w-full to set an element to a 100% based width.

  3. Set the maximum width/height of an element using the md:max-w-3xl utilities at only medium screen sizes.

  4. Control the horizontal margin of an element to auto using the mx-auto utilities.

  5. Use flex to create a block-level flex container.

  6. Use flex to create a block-level flex container.

  7. Set the minimum width/height of an element using the min-h-screen utilities.

  8. Control the padding on all sides of an element to 1rem using the p-4 utilities.

  9. Control the padding on all sides of an element to 0rem at only medium screen sizes using the md:p-0 utilities.

  10. Control the margin on top side of an element to 2.5rem using the mt-10 utilities.

  11. Control the margin on top side of an element to 1rem at only medium screen sizes using the md:mt-4 utilities.

  12. Use flex to create a block-level flex container.

  13. Control the padding on top side of an element to 0rem using the pt-0 utilities.

  14. Control the padding on bottom side of an element to 1.25rem using the pb-5 utilities.

  15. Control the padding on top side of an element to 2.5rem at only medium screen sizes using the md:pt-10 utilities.

  16. Control the padding on bottom side of an element to 1.25rem at only medium screen sizes using the md:pb-5 utilities.

  17. Control the horizontal margin of an element to 1rem using the mx-4 utilities.

  18. Control the background color of an element to white using the bg-white utilities.

  19. Control the vertical padding of an element to 1rem using the py-4 utilities.

  20. Control the horizontal padding of an element to 1.5rem using the px-6 utilities.

  21. Control the text color of an element to gray-700 using the text-gray-700 utilities.

  22. Control the padding on all sides of an element to 0.5rem using the p-2 utilities.

  23. Control the padding on all sides of an element to 1rem at only medium screen sizes using the md:p-4 utilities.

  24. Use w-10 to set an element to a fixed width(2.5rem).

  25. Use h-12 to set an element to a fixed height(3rem).

  26. Use md:w-10 to set an element to a fixed width(2.5rem) at only medium screen sizes.

  27. Use md:h-12 to set an element to a fixed height(3rem) at only medium screen sizes.

  28. Control the text color of an element to center using the text-center utilities.

  29. Control the margin on top side of an element to 1rem using the mt-4 utilities.

  30. Control the text color of an element to 2xl using the text-2xl utilities.

  31. Control the text color of an element to gray-600 using the text-gray-600 utilities.

  32. Control the text color of an element to sm using the text-sm utilities.

  33. Control the margin on top side of an element to 0.25rem using the mt-1 utilities.

  34. Use w-24 to set an element to a fixed width(6rem).

  35. Use h-24 to set an element to a fixed height(6rem).

  36. Use flex to create a block-level flex container.

  37. Control the margin on top side of an element to 0.75rem using the mt-3 utilities.

  38. Control the margin on top side of an element to 1.5rem at only medium screen sizes using the md:mt-6 utilities.

  39. Control the text color of an element to xs using the text-xs utilities.

  40. Control the margin on top side of an element to 0.5rem using the mt-2 utilities.

  41. Control the horizontal padding of an element to 0.75rem using the px-3 utilities.

  42. Control the margin on all sides of an element to auto using the m-auto utilities.

  43. Control the text color of an element to gray-800 using the text-gray-800 utilities.

  44. Use flex to create a block-level flex container at only medium screen sizes.

  45. Set the maximum width/height of an element using the max-w-6xl utilities.

  46. Use w-6 to set an element to a fixed width(1.5rem).

  47. Control the horizontal margin of an element to 0.25rem using the mx-1 utilities.

  48. Control the text color of an element to gray-500 using the text-gray-500 utilities.

  49. Control the text color of an element to blue-400 on hover using the hover:text-blue-400 utilities.

  50. Control the text color of an element to black on hover using the hover:text-black utilities.

  51. Control the text color of an element to blue-500 on hover using the hover:text-blue-500 utilities.

  52. Control the text color of an element to pink-500 on hover using the hover:text-pink-500 utilities.

  53. Use h-auto to set an element to a fixed height(auto).

  54. Use w-11/12 to set an element to a fixed width(11/12).

  55. Use md:w-1/2 to set an element to a fixed width(1/2) at only medium screen sizes.

  56. Control the padding on all sides of an element to 1.25rem using the p-5 utilities.

  57. Use w-10/12 to set an element to a fixed width(10/12).

  58. Control the vertical padding of an element to 0.75rem using the py-3 utilities.

  59. Use w-1/12 to set an element to a fixed width(1/12).

  60. Control the vertical padding of an element to 2.5rem using the py-10 utilities.

  61. Control the horizontal padding of an element to 0.5rem using the px-2 utilities.

  62. Control the background color of an element to gray-200 using the bg-gray-200 utilities.

Conclusion

The above is a step-by-step tutorial on how to use Tailwind CSS to make a Gokemon Template components, learn and follow along to implement your own components.