Published on

3 Things You Must Know To Build A Social Media Template With Tailwind CSS

Tags
Pages
Social Media 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 Social Media Template ui component

A simple social media template. the navbar doesn't completely work. use this to get started on designing a social media page.

Why use Tailwind CSS to create a Social Media Template ui component?

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

The preview of Social Media Template ui component

Free download of the Social Media Template's source code

The source code of Social Media Template ui component

<div class="w-full flex flex-row flex-wrap">
  <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <style>
  .round {
    border-radius: 50%;
  }
</style>


<div class="w-full bg-indigo-100 h-screen flex flex-row flex-wrap justify-center ">
  
  <!-- Begin Navbar -->
  
  <div class="bg-white shadow-lg border-t-4 border-indigo-500 absolute bottom-0 w-full md:w-0 md:hidden flex flex-row flex-wrap">
    <div class="w-full text-right"><button class="p-2 fa fa-bars text-4xl text-gray-600"></button></div>
  </div>
  
  <div class="w-0 md:w-1/4 lg:w-1/5 h-0 md:h-screen overflow-y-hidden bg-white shadow-lg">
    <div class="p-5 bg-white sticky top-0">
      <img class="border border-indigo-100 shadow-lg round" src="http://lilithaengineering.co.za/wp-content/uploads/2017/08/person-placeholder.jpg">
      <div class="pt-2 border-t mt-5 w-full text-center text-xl text-gray-600">
        Some Person
      </div>
    </div>
    <div class="w-full h-screen antialiased flex flex-col hover:cursor-pointer">
      <a class="hover:bg-gray-300 bg-gray-200 border-t-2 p-3 w-full text-xl text-left text-gray-600 font-semibold" href=""><i class="fa fa-comment text-gray-600 text-2xl pr-1 pt-1 float-right"></i>Messages</a>
      <a class="hover:bg-gray-300 bg-gray-200 border-t-2 p-3 w-full text-xl text-left text-gray-600 font-semibold" href=""><i class="fa fa-cog text-gray-600 text-2xl pr-1 pt-1 float-right"></i>Settings</a>
      <a class="hover:bg-gray-300 bg-gray-200 border-t-2 p-3 w-full text-xl text-left text-gray-600 font-semibold" href=""><i class="fa fa-arrow-left text-gray-600 text-2xl pr-1 pt-1 float-right"></i>Log out</a>
    </div>
  </div>
  
  <!-- End Navbar -->
  
  <div class="w-full md:w-3/4 lg:w-4/5 p-5 md:px-12 lg:24 h-full overflow-x-scroll antialiased">
    <div class="bg-white w-full shadow rounded-lg p-5">
      <textarea class="bg-gray-200 w-full rounded-lg shadow border p-2" rows="5" placeholder="Speak your mind"></textarea>
      
      <div class="w-full flex flex-row flex-wrap mt-3">
        <div class="w-1/3">
          <select class="w-full p-2 rounded-lg bg-gray-200 shadow border float-left">
            <option>Public</option>
            <option>Private</option>
          </select>
        </div>
        <div class="w-2/3">
          <button type="button" class="float-right bg-indigo-400 hover:bg-indigo-300 text-white p-2 rounded-lg">Submit</button>
        </div>
      </div>
    </div>
    
    <div class="mt-3 flex flex-col">
      
      
      <div class="bg-white mt-3">
        <img class="border rounded-t-lg shadow-lg " src="https://images.unsplash.com/photo-1572817519612-d8fadd929b00?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80">
        <div class="bg-white border shadow p-5 text-xl text-gray-700 font-semibold">
          A Pretty Cool photo from the mountains. Image credit to @danielmirlea on Unsplash.
        </div>
        <div class="bg-white p-1 border shadow flex flex-row flex-wrap">
          <div class="w-1/3 hover:bg-gray-200 text-center text-xl text-gray-700 font-semibold">Like</div>
          <div class="w-1/3 hover:bg-gray-200 border-l-4 border-r- text-center text-xl text-gray-700 font-semibold">Share</div>
          <div class="w-1/3 hover:bg-gray-200 border-l-4 text-center text-xl text-gray-700 font-semibold">Comment</div>
        </div>
        
        <div class="bg-white border-4 bg-gray-300 border-white rounded-b-lg shadow p-5 text-xl text-gray-700 content-center font-semibold flex flex-row flex-wrap">
          <div class="w-full">
            <div class="w-full text-left text-xl text-gray-600">
              @Some Person
            </div>
            A Pretty Cool photo from the mountains. Image credit to @danielmirlea on Unsplash.
            A Pretty Cool photo from the mountains. Image credit to @danielmirlea on Unsplash.
          </div>
        </div>
      </div>
      
      
      <div class="bg-white mt-3">
        <img class="border rounded-t-lg shadow-lg " src="https://images.unsplash.com/photo-1572817519612-d8fadd929b00?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80">
        <div class="bg-white border shadow p-5 text-xl text-gray-700 font-semibold">
          A Pretty Cool photo from the mountains. Image credit to @danielmirlea on Unsplash.
        </div>
        <div class="bg-white p-1 rounded-b-lg border shadow flex flex-row flex-wrap">
          <div class="w-1/3 hover:bg-gray-200 text-center text-xl text-gray-700 font-semibold">Like</div>
          <div class="w-1/3 hover:bg-gray-200 border-l-4 border-r- text-center text-xl text-gray-700 font-semibold">Share</div>
          <div class="w-1/3 hover:bg-gray-200 border-l-4 text-center text-xl text-gray-700 font-semibold">Comment</div>
        </div>
      </div>
      
      
      <div class="bg-white mt-3">
        <img class="border rounded-t-lg shadow-lg " src="https://images.unsplash.com/photo-1572817519612-d8fadd929b00?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80">
        <div class="bg-white border shadow p-5 text-xl text-gray-700 font-semibold">
          A Pretty Cool photo from the mountains. Image credit to @danielmirlea on Unsplash.
        </div>
        <div class="bg-white p-1 rounded-b-lg border shadow flex flex-row flex-wrap">
          <div class="w-1/3 hover:bg-gray-200 text-center text-xl text-gray-700 font-semibold">Like</div>
          <div class="w-1/3 hover:bg-gray-200 border-l-4 border-r- text-center text-xl text-gray-700 font-semibold">Share</div>
          <div class="w-1/3 hover:bg-gray-200 border-l-4 text-center text-xl text-gray-700 font-semibold">Comment</div>
        </div>
      </div>
    </div>
  </div>
</div>

</div>

How to create a Social Media Template with Tailwind CSS?

Install tailwind css of verion 1.0.4

Use the link html tag to import the stylesheet of Tailwind CSS of the version 1.0.4

<link href=https://unpkg.com/[email protected]/dist/tailwind.min.css rel="stylesheet">

All the unility class needed to create a Social Media Template component

  • w-full
  • flex
  • flex-row
  • flex-wrap
  • bg-indigo-100
  • h-screen
  • bg-white
  • border-t-4
  • border-indigo-500
  • absolute
  • bottom-0
  • md:w-0
  • md:hidden
  • text-right
  • p-2
  • text-4xl
  • text-gray-600
  • w-0
  • md:w-1/4
  • lg:w-1/5
  • h-0
  • md:h-screen
  • p-5
  • sticky
  • top-0
  • border-indigo-100
  • pt-2
  • border-t
  • mt-5
  • text-center
  • text-xl
  • flex-col
  • hover:bg-gray-300
  • bg-gray-200
  • border-t-2
  • p-3
  • text-left
  • text-2xl
  • pr-1
  • pt-1
  • float-right
  • md:w-3/4
  • lg:w-4/5
  • md:px-12
  • h-full
  • overflow-x-scroll
  • mt-3
  • w-1/3
  • float-left
  • w-2/3
  • bg-indigo-400
  • hover:bg-indigo-300
  • text-white
  • text-gray-700
  • p-1
  • hover:bg-gray-200
  • border-l-4
  • border-r-
  • border-4
  • bg-gray-300
  • border-white

61 steps to create a Social Media Template component with Tailwind CSS

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

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

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

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

  5. Control the background color of an element to indigo-100 using the bg-indigo-100 utilities.

  6. Use h-screen to make an element span the entire height of the viewport.

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

  8. Control the border color of an element to t-4 using the border-t-4 utilities.

  9. Control the border color of an element to indigo-500 using the border-indigo-500 utilities.

  10. Use absolute to position an element outside of the normal flow of the document, causing neighboring elements to act as if the element doesn’t exist.

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

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

  13. Use hidden to set an element to display: none and remove it from the page layout at only medium screen sizes.

  14. Control the text color of an element to right using the text-right utilities.

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

  16. Control the text color of an element to 4xl using the text-4xl utilities.

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

  18. Use w-0 to set an element to a fixed width(0rem).

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

  20. Use lg:w-1/5 to set an element to a fixed width(1/5) at only large screen sizes.

  21. Use h-0 to set an element to a fixed height(0rem).

  22. Use h-screen to make an element span the entire height of the viewport at only medium screen sizes.

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

  24. Use sticky to position an element as relative until it crosses a specified threshold, then treat it as fixed until its parent is off screen.

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

  26. Control the border color of an element to indigo-100 using the border-indigo-100 utilities.

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

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

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

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

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

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

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

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

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

  36. Control the padding on all sides of an element to 0.75rem using the p-3 utilities.

  37. Control the text color of an element to left using the text-left utilities.

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

  39. Control the padding on right side of an element to 0.25rem using the pr-1 utilities.

  40. Control the padding on top side of an element to 0.25rem using the pt-1 utilities.

  41. Use float-right to float an element to the right of its container.

  42. Use md:w-3/4 to set an element to a fixed width(3/4) at only medium screen sizes.

  43. Use lg:w-4/5 to set an element to a fixed width(4/5) at only large screen sizes.

  44. Control the horizontal padding of an element to 3rem at only medium screen sizes using the md:px-12 utilities.

  45. Use h-full to set an element’s height to 100% of its parent, as long as the parent has a defined height.

  46. Use overflow-x-scroll to allow horizontal scrolling and always show scrollbars unless always-visible scrollbars are disabled by the operating system.

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

  48. Use w-1/3 to set an element to a fixed width(1/3).

  49. Use float-left to float an element to the left of its container.

  50. Use w-2/3 to set an element to a fixed width(2/3).

  51. Control the background color of an element to indigo-400 using the bg-indigo-400 utilities.

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

  53. Control the text color of an element to white using the text-white utilities.

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

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

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

  57. Control the border color of an element to l-4 using the border-l-4 utilities.

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

  59. Control the border color of an element to 1rem using the border-4 utilities.

  60. Control the background color of an element to gray-300 using the bg-gray-300 utilities.

  61. Control the border color of an element to white using the border-white utilities.

Conclusion

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