Published on

Ways To Make A Github Profile Page Clone+Javascript With Tailwind CSS In 60 Minutes

Tags
NavigationsPages
Github Profile Page Clone+Javascript

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 Github Profile Page Clone+Javascript ui component

Github+api profile page eorking clone more to be added soon

Why use Tailwind CSS to make a Github Profile Page Clone+Javascript ui component?

  • It can make the building process of Github Profile Page Clone+Javascript ui component faster and more easily.
  • Enables building complex responsive layouts and components freely.
  • Minimum lines of CSS code in Github Profile Page Clone+Javascript component file.

The preview of Github Profile Page Clone+Javascript ui component

Free download of the Github Profile Page Clone+Javascript's source code

The source code of Github Profile Page Clone+Javascript ui component

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>GitHub</title>
    <!-- <script src="tailwind.js"></script> -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link
      rel="icon"
      class="js-site-favicon"
      type="image/svg+xml"
      href="https://github.githubassets.com/favicons/favicon.svg"
    />
    <!-- <link rel="alternate icon" class="js-site-favicon" type="image/png" href="https://github.githubassets.com/favicons/favicon.png"> -->
  </head>
  <body class="" >
    <div id="navbar" class="w-full -mt-2">
      <nav class=" w-full top-0 flex justify-between items-center bg-gray-800 text-gray-50">
        <div class="flex items-center font-semibold">
          <img
            src="http://cdn.onlinewebfonts.com/svg/img_326384.png"
            class="hover:bg-gray-300 ml-8 mr-4 bg-white text-black w-8 h-8 rounded-full"
            height="260px" width="260px"
            
          />
          <input
            type="text"
            id="search"
            onkeypress="searchUser(event)"
            placeholder="Search or jump to"
            value="shaantanu9"
            class="pl-1 pt-2 w-64 border-r-0 outline-none hover:w-80 bg-gray-800 text-gray-50 border border-gray-500 rounded-lg rounded-r-none hover:bg-white hover:text-gray-900"
          />
          <div
            class="border border-gray-500 w-6 text-center h-8 rounded-r pl-1 pt-2 border-l-0 hover:bg-white"
          >
            <div
              class="border border-gray-500 w-6 text-center h-6 text-xs hover:bg-white rounded pl-1 pt-2 -ml-2 -mt-1"
            >
              /
            </div>
          </div>
          <a
            href=""
            class="p-2 py-5 font-md hover:text-gray-300 pointer:cursor text-sm mr-1 ml-1"
            >Pull requests</a
          >
          <a
            href=""
            class="p-2 py-5 font-md hover:text-gray-300 pointer:cursor text-sm mr-1"
            >Issues</a
          >
          <a
            href=""
            class="p-2 py-5 font-md hover:text-gray-300 pointer:cursor text-sm mr-1"
            >Marketplace</a
          >
          <a
            href=""
            class="p-2 py-5 font-md hover:text-gray-300 pointer:cursor text-sm mr-1"
            >Explore</a
          >
        </div>
        <div class="flex justify-between items-center mr-6">
          <div
            class="flex justify-center items-center mx-2 hover:text-gray-300"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-5 w-5 ml-3"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
              />
            </svg>

            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-3 w-3"
              viewBox="0 0 20 20"
              fill="currentColor"
            >
              <path
                fill-rule="evenodd"
                d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                clip-rule="evenodd"
              />
            </svg>
          </div>
          <div
            class="flex justify-center items-center mx-2 hover:text-gray-300"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-5 w-5"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M12 6v6m0 0v6m0-6h6m-6 0H6"
              />
            </svg>
          </div>

          <div class="flex justify-center items-center">
            <div class="h-8 w-8 bg-red-500 rounded-full bg-image ">
                <img class="h-8 w-8 bg-gray-800 rounded-full bg-image" id="navImg" ></img></div>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-3 w-3"
              viewBox="0 0 20 20"
              fill="currentColor"
            >
              <path
                fill-rule="evenodd"
                d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                clip-rule="evenodd"
              />
            </svg>
          </div>
        </div>
      </nav>
    </div>

    <div class=" mt-4 text-md flex items-center bg-white " >
        <div id="pageMenuTag" class=" flex items-center justify-between ml-40 "></div>
        <div id="pageMenuTag" class=" flex items-center justify-between w-96 ml-80 ">
                <!-- <div id="pageMenuTag" class=" flex items-center justify-between w-96 bottom-0 mr-24 ml-12 mb-12 "> -->
                <!-- <div id="pageMenuTag" class=" flex items-center justify-between w-full bottom-0 mr-64 ml-12 mb-12 divide-y divide-gray-800"> -->
                <a href="">Overview</a>
                <a href="">Repositories</a>
                <a href="">Project</a>
                <a href="">Package</a>
                <a href="">Stars</a>
        </div>    
    </div>

    
        <div class="flex">

            <div class="ml-12" >

                <img  id="imgAvatar" class="rounded-full"  alt="">
                <!-- <img src="https://avatars.githubusercontent.com/u/33876955?v=4" id="imgAvatar" class="rounded-full"  alt=""> -->
                <h1 class="text-3xl font-bold" id="fullName" >Shantanu Bombatkar</h1>
                <p class="text-gray-600" id="username" ></p>
                <p id="bio" class="  text-black text-lg"></p>
                <button class="rounded bg-gray-200 p-2 mt-6 mx-1/2">Edit Profile</button>
                <div class="flex justify-evenly mb-3 items-center">
                    <p  class="p-1" >Follower</p>
                    <p id="follower" class="p-1" ></p>
                    <p  class="p-1">Following</p>
                    <p id="following" class="p-1"></p>
                </div>
                <p id="company" class="p-1" >@shodkk</p>
                <p id="location" class="p-1" >India</p>
                <p id="blog" class="p-1" >https://shodkk.com</p>
                <h3></h3>
            </div>

            <div id="container" class="grid grid-cols-2 m-12 gap-6 mb-12 " style="height:300px" >
                <!-- <div id="mainWrapper" class=" shodow-inner shadow-lg border-t-2 m-3 mt-12 p-4 ">
                    <div id="nameVisibilityWrapper" class="flex mt-4 justify-between items-center">
                        <a href="" id="name" class="text-blue-600">Neural-Network-with-Python</a>
                        <button class=" bg-gray-200 w-12 mr-4 text-sm font-thin rounded-2xl" id="visibility" >Public</button>
                    </div>
                    <p class="text-sm">Forked from jiexunsee/Neural-Network-with-Python</p>
                    <p class="text-sm mt-12 " id="discription" >A neural network with 3 layers made with just numpy as dependency</p>
                    <div id="languageWrapper" class="flex justify-end">
                        <div class=" w-4 h-4 rounded-full bg-blue-900"></div>
                        <p id="language" >Python</p>
                    </div>
                 </div> -->
                
            </div>
        </div>
        <div class="mt-12" ></div>
    


        
      

  </body>
  <div class="ffooter"></div>
  
  <script>


// function searchUser(e) {
function searchUser(e) {

searchUsername = document.getElementById('search').value

e.key=="Enter"? getUser(searchUsername):console.log("Press Enter to Search")

}

async function getUser(searchUsername){

// console.log("object")
console.log("getUser")


baseUrl = `https://api.github.com/users/${searchUsername}/repos`;
baseUrl2 = `https://api.github.com/users/${searchUsername}`;

let data = await fetch(baseUrl);
let response = await data.json();

let data2 = await fetch(baseUrl2);
let response2 = await data2.json();


console.log(response)

getUserRepoData(response);
getUserData(response2);

}

function getUserData(arr){

console.log("getUserData")

// arr.forEach(({login,url,name,blog,compnay,location,bio,follower, following})=>{

document.getElementById('fullName').innerHTML = arr.name;
document.getElementById('username').innerHTML = arr.login;
document.getElementById('follower').innerHTML = arr.followers;
document.getElementById('following').innerHTML = arr.following;
document.getElementById('company').innerHTML = arr.company
document.getElementById('location').innerHTML = arr.location; 
document.getElementById('bio').innerHTML = arr.bio;
document.getElementById('blog').innerHTML = arr.blog; 

// });

}


function getUserRepoData(arr){


document.querySelector('#container').innerHTML = ""


console.log("getUserdata")

 document.querySelector('#imgAvatar').src =  arr[0].owner.avatar_url
 document.querySelector('#navImg').src =  arr[0].owner.avatar_url

arr.forEach(({name, html_url, language,description,visibility})=>{
  
  console.log(name)
//   console.log(name, html_url, language, description,visibility)

let mainWrapper = document.createElement("div");
mainWrapper.classList.add("shodow-inner", "shadow-lg", "border-t-2","m-3","mt-12","p-4")

let nameVisibilityWrapper = document.createElement("div");
nameVisibilityWrapper.classList.add("flex","mt-4","justify-between","items-center")

let nameA= document.createElement("a");
nameA.classList.add("text-blue-600");
nameA.innerHTML = name;
nameA.href = html_url;

let visibilityBtn=document.createElement("button");
visibilityBtn.classList.add("bg-gray-200","w-12","mr-4","text-sm","font-thin","rounded-2xl")
visibilityBtn.innerHTML = visibility

nameVisibilityWrapper.append(nameA,visibilityBtn);

let descriptionP = document.createElement("p");
descriptionP.classList.add("text-sm","mt-12")
descriptionP.innerHTML = description

let languageWrapper = document.createElement("div");
languageWrapper.classList.add("flex","justify-end")
// languageWrapper.innerHTML =

let circleD = document.createElement("div");
circleD.classList.add("w-4","h-4","rounded-full","bg-blue-900")

let languageP = document.createElement("p");
languageP.innerHTML = language
// language.classList.add("")

languageWrapper.append(circleD, languageP)

mainWrapper.append(nameVisibilityWrapper, descriptionP,languageWrapper)
// console.log(mainWrapper)
document.querySelector('#container').append(mainWrapper);

})

let footerdiv = `<div id="footer" class="bottom-0 mr-64 ml-12 mb-12 divide-y divide-gray-800" style="bottom:0px; position: absolute;" > 
    <!-- <div id="footer" class="bottom-0 mr-64 ml-12 mb-12 divide-y divide-gray-800"> -->
      <footer class=" bottom-0 flex flex items-center justify-between">
        <div class="flex items-center mr-12">
          <div class="">
            <img
              src="https://github.githubassets.com/favicons/favicon.svg"
              class="hover:bg-gray-300 bg-gray-50 ml-8 mr-4 bg-white text-black w-6 h-6 rounded-full"
              alt=""
            />
          </div>
          <p class="text-sm text-gray-500">© 2022 GitHub, Inc.</p>
        </div>
        <!-- <div>    
      <a class="text-blue-500 text-sm" href="" >Terms</a>
    </div> -->
        <!-- <div> -->
        <a class="text-blue-500 text-xs hover:underline" href="/">Terms</a>
        <a class="text-blue-500 text-xs hover:underline" href="/">Privacy</a>
        <a class="text-blue-500 text-xs hover:underline" href="/">Security</a>
        <a class="text-blue-500 text-xs hover:underline" href="/">Status</a>
        <a class="text-blue-500 text-xs hover:underline" href="/">Docs</a>
        <a class="text-blue-500 text-xs hover:underline" href="/">Contact GitHub</a>
        <a class="text-blue-500 text-xs hover:underline" href="/">Pricing</a>
        <a class="text-blue-500 text-xs hover:underline" href="/">API</a>
        <a class="text-blue-500 text-xs hover:underline" href="/">Training</a>
        <a class="text-blue-500 text-xs hover:underline" href="/">Blog</a>
        <a class="text-blue-500 text-xs hover:underline" href="/">About</a>
        <!-- </div> -->
      </footer>
    </div>`


// // div.innerHTML =footerdiv
    // document.querySelector('.ffooter').innerHTML = footerdiv;


}

  </script>

</html>

How to make a Github Profile Page Clone+Javascript 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 Github Profile Page Clone+Javascript component

  • w-full
  • -mt-2
  • top-0
  • flex
  • bg-gray-800
  • text-gray-50
  • hover:bg-gray-300
  • ml-8
  • mr-4
  • bg-white
  • text-black
  • w-8
  • h-8
  • pl-1
  • pt-2
  • w-64
  • border-r-0
  • hover:w-80
  • border-gray-500
  • hover:bg-white
  • hover:text-gray-900
  • w-6
  • text-center
  • border-l-0
  • h-6
  • text-xs
  • -ml-2
  • -mt-1
  • p-2
  • py-5
  • hover:text-gray-300
  • text-sm
  • mr-1
  • ml-1
  • mr-6
  • mx-2
  • h-5
  • w-5
  • ml-3
  • h-3
  • w-3
  • bg-red-500
  • bg-image
  • mt-4
  • text-md
  • ml-40
  • w-96
  • ml-80
  • bottom-0
  • mr-24
  • ml-12
  • mb-12
  • mr-64
  • text-3xl
  • text-gray-600
  • text-lg
  • bg-gray-200
  • mt-6
  • mx-1/2
  • mb-3
  • p-1
  • grid
  • grid-cols-2
  • m-12
  • gap-6
  • border-t-2
  • m-3
  • mt-12
  • p-4
  • text-blue-600
  • w-12
  • w-4
  • h-4
  • bg-blue-900
  • mr-12
  • bg-gray-50
  • text-gray-500
  • text-blue-500

78 steps to make a Github Profile Page Clone+Javascript component with Tailwind CSS

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

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

  3. Use the top-0 utilities to set the top position of a positioned element to 0rem.

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

  5. Control the background color of an element to gray-800 using the bg-gray-800 utilities.

  6. Control the text color of an element to gray-50 using the text-gray-50 utilities.

  7. Control the background color of an element to gray-300 using the hover:bg-gray-300 utilities on hover.

  8. Control the margin on left side of an element to 2rem using the ml-8 utilities.

  9. Control the margin on right side of an element to 1rem using the mr-4 utilities.

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

  11. Control the text color of an element to black using the text-black utilities.

  12. Use w-8 to set an element to a fixed width(2rem).

  13. Use h-8 to set an element to a fixed height(2rem).

  14. Adjust the left padding of the element to 0.25rem using the pl-1 utilities class

  15. Control the padding on top side of an element to 0.5rem using the pt-2 utilities.

  16. Use w-64 to set an element to a fixed width(16rem).

  17. Control the border color of an element to r-0 using the border-r-0 utilities.

  18. Use hover:w-80 to set an element to a fixed width(20rem) on hover.

  19. Control the border color of an element to gray-500 using the border-gray-500 utilities.

  20. Control the background color of an element to white using the hover:bg-white utilities on hover.

  21. Control the text color of an element to gray-900 on hover using the hover:text-gray-900 utilities.

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

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

  24. Control the border color of an element to l-0 using the border-l-0 utilities.

  25. Use h-6 to set an element to a fixed height(1.5rem).

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

  27. Control the margin on left side of an element to -0.5rem using the -ml-2 utilities.

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

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

  30. Control the vertical padding of an element to 1.25rem using the py-5 utilities.

  31. Control the text color of an element to gray-300 on hover using the hover:text-gray-300 utilities.

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

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

  34. Control the margin on left side of an element to 0.25rem using the ml-1 utilities.

  35. Control the margin on right side of an element to 1.5rem using the mr-6 utilities.

  36. Control the horizontal margin of an element to 0.5rem using the mx-2 utilities.

  37. Use h-5 to set an element to a fixed height(1.25rem).

  38. Use w-5 to set an element to a fixed width(1.25rem).

  39. Control the margin on left side of an element to 0.75rem using the ml-3 utilities.

  40. Use h-3 to set an element to a fixed height(0.75rem).

  41. Use w-3 to set an element to a fixed width(0.75rem).

  42. Control the background color of an element to red-500 using the bg-red-500 utilities.

  43. Control the background color of an element to image using the bg-image utilities.

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

  45. Control the text color of an element to md using the text-md utilities.

  46. Control the margin on left side of an element to 10rem using the ml-40 utilities.

  47. Use w-96 to set an element to a fixed width(24rem).

  48. Control the margin on left side of an element to 20rem using the ml-80 utilities.

  49. Use the bottom-0 utilities to set the bottom position of a positioned element to 0rem.

  50. Control the margin on right side of an element to 6rem using the mr-24 utilities.

  51. Control the margin on left side of an element to 3rem using the ml-12 utilities.

  52. Control the margin on bottom side of an element to 3rem using the mb-12 utilities.

  53. Control the margin on right side of an element to 16rem using the mr-64 utilities.

  54. Control the text color of an element to 3xl using the text-3xl utilities.

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

  56. Control the text color of an element to lg using the text-lg utilities.

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

  58. Control the margin on top side of an element to 1.5rem using the mt-6 utilities.

  59. Control the horizontal margin of an element to 1/2 using the mx-1/2 utilities.

  60. Control the margin on bottom side of an element to 0.75rem using the mb-3 utilities.

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

  62. Use grid to create a grid container.

  63. Use grid to create a grid container.

  64. Control the margin on all sides of an element to 3rem using the m-12 utilities.

  65. To specify the width between columns, you can use the gap-6 utilities.

  66. Control the border color of an element to t-2 using the border-t-2 utilities.

  67. Control the margin on all sides of an element to 0.75rem using the m-3 utilities.

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

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

  70. Control the text color of an element to blue-600 using the text-blue-600 utilities.

  71. Use w-12 to set an element to a fixed width(3rem).

  72. Use w-4 to set an element to a fixed width(1rem).

  73. Use h-4 to set an element to a fixed height(1rem).

  74. Control the background color of an element to blue-900 using the bg-blue-900 utilities.

  75. Control the margin on right side of an element to 3rem using the mr-12 utilities.

  76. Control the background color of an element to gray-50 using the bg-gray-50 utilities.

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

  78. Control the text color of an element to blue-500 using the text-blue-500 utilities.

Conclusion

The above is a step-by-step tutorial on how to use Tailwind CSS to make a Github Profile Page Clone+Javascript components, learn and follow along to implement your own components.