Published on

A Complete Guide To Make A Stock page With Tailwind CSS

Tags
Pages
Stock page

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 Stock page ui component

Inspired by google finance

Why use Tailwind CSS to build a Stock page ui component?

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

The preview of Stock page ui component

Free download of the Stock page's source code

The source code of Stock page ui component

<header class="text-gray-100 bg-white body-font shadow w-full">
        <div class="container mx-auto flex flex-wrap flex-col md:flex-row items-center">
 <a class="">
                <img src="https://i.imgur.com/K6AIhk2.png" style="height: 40px; margin-top: 10px; margin-bottom: 10px;" alt="logo">

            </a>
                </nav>
           
            <div class="lg:w-2/5 inline-flex lg:justify-end ml-5 lg:ml-0">
  <input type="search" name="serch" placeholder="Search for stock, ETF" class="bg-gray-100 h-10 px-5 pr-10 rounded-full text-sm focus:outline-none">
  <button type="submit" class="absolute right-0 top-0 mt-3 mr-4">
    <svg class="h-4 w-4 fill-current" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 56.966 56.966" style="enable-background:new 0 0 56.966 56.966;" xml:space="preserve" width="512px" height="512px">
      <path d="M55.146,51.887L41.588,37.786c3.486-4.144,5.396-9.358,5.396-14.786c0-12.682-10.318-23-23-23s-23,10.318-23,23  s10.318,23,23,23c4.761,0,9.298-1.436,13.177-4.162l13.661,14.208c0.571,0.593,1.339,0.92,2.162,0.92  c0.779,0,1.518-0.297,2.079-0.837C56.255,54.982,56.293,53.08,55.146,51.887z M23.984,6c9.374,0,17,7.626,17,17s-7.626,17-17,17  s-17-7.626-17-17S14.61,6,23.984,6z"/>
    </svg>
  </button>
            </div>
        </div>
    </header>

<header class="flex-none flex h-16 bg-gray-100 border-t px-4 items-center">
    
      <h1 class="font-semibold text-lg">My Portfolio</h1>

    </header>
<div class="flex items-center bg-gray-100  text-gray-800">
  <div class="p-4 w-full">
    <div class="grid grid-cols-12 gap-4">
      <div class="col-span-12 sm:col-span-6 md:col-span-3">
        <div class="flex flex-row bg-white shadow-sm rounded p-4">

          <div class="flex flex-col flex-grow ml-4">
            <div class="text-sm text-gray-500">
<div class="col-span-12 lg:col-span-8">
                        <a href="#" class="inline-block rounded-full text-white 
                            bg-indigo-700
                            text-xs font-bold 
                            mr-1 md:mr-2 mb-2 px-2 md:px-4 py-1 ">
                            삼성전자
                        </a>
                    </div></div>
            <div class="font-bold text-lg">₩91,000.00</div>
            <span class="text-red-500">▲ 2.48%</span>
          </div>
        </div>
      </div>
      <div class="col-span-12 sm:col-span-6 md:col-span-3">
               <div class="flex flex-row bg-white shadow-sm rounded p-4">

          <div class="flex flex-col flex-grow ml-4">
            <div class="text-sm text-gray-500">
<div class="col-span-12 lg:col-span-8">
                        <a href="#" class="inline-block rounded-full text-white 
                            bg-black
                            text-xs font-bold 
                            mr-1 md:mr-2 mb-2 px-2 md:px-4 py-1 ">
                            Tesla Inc
                        </a>
                    </div></div>
            <div class="font-bold text-lg">$880.02</div>
            <span class="text-gray-500">- 0.00%</span>
          </div>
        </div>
      </div>
      <div class="col-span-12 sm:col-span-6 md:col-span-3">
                <div class="flex flex-row bg-white shadow-sm rounded p-4">

          <div class="flex flex-col flex-grow ml-4">
            <div class="text-sm text-gray-500">
<div class="col-span-12 lg:col-span-8">
                        <a href="#" class="inline-block rounded-full text-black
                            ring-black ring-2
                            text-xs font-bold 
                            mr-1 md:mr-2 mb-2 px-2 md:px-4 py-1 ">
                            KOSPI
                        </a>
                    </div></div>
            <div class="font-bold text-lg">3,148.45</div>
            <span class="text-blue-500">▼ 0.12%</span>
          </div>
        </div>
      </div>
      <div class="col-span-12 sm:col-span-6 md:col-span-3">
        <div class="flex flex-row bg-white shadow-sm rounded">

          <div id="empty-cover-art" class="py-5 h-full rounded sm:w-full  text-center opacity-50 md:border-solid md:border-2 md:border-gray-400">
 <center><svg width="48" xmlns="http://www.w3.org/2000/svg" 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></center>
  <div class="">
    Create New
  </div>
</div>

        </div>


      </div>
    </div>
  </div>
</div>
<div class="bg-cover bg-center  h-auto text-white py-24 px-10 object-fill" style="background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSxJPlSKDyfGg_WEpda49DZyo_fSKrdmxoIaqosNxD_luNQ0QaDKRqnU6CWEB8)">
       <div class="md:w-1/2">
        <p class="font-bold text-sm uppercase">FINANCE NEWS - <a href="#" class="inline-block rounded-full text-black
                            ring-black ring-2
                            text-xs font-bold bg-white
                            mr-1 md:mr-2 mb-2 px-2 md:px-4 py-1 ">
                            Nifty_50
                        </a></p>
        <p class="text-lg font-bold">Traders' Guide: Nifty has to hold above 14,300 level to witness fresh rally</p>
        <p class="text-sm mb-10 leading-none">The Economic Times - 29min ago</p>
</div>  
    </div>
<header class="flex-none flex h-16 bg-gray-100 border-t px-4 items-center">

      <h1 class="font-semibold text-lg">Compare market</h1>
    </header>
<header class="flex-none flex  bg-gray-100 px-4 items-center">

     <a href="#" class="inline-block rounded-full text-blue-700
                            bg-blue-100
                            text-xs font-bold 
                            mr-1 md:mr-2 mb-2 px-2 md:px-4 py-1 ">
                            United States
                        </a>
         <a href="#" class="inline-block rounded-full text-black
                            
                            text-xs 
                            mr-1 md:mr-2 mb-2 px-2 md:px-4 py-1 ">
                            Asia
                        </a>
         <a href="#" class="inline-block rounded-full text-black
                            
                            text-xs 
                            mr-1 md:mr-2 mb-2 px-2 md:px-4 py-1 ">
                            Europe
                        </a>
         <a href="#" class="inline-block rounded-full text-black
                            
                            text-xs 
                            mr-1 md:mr-2 mb-2 px-2 md:px-4 py-1 ">
                            Currency
                        </a>
                 <a href="#" class="inline-block rounded-full text-black
                            
                            text-xs 
                            mr-1 md:mr-2 mb-2 px-2 md:px-4 py-1 ">
                            Crypto
                        </a>
    </header>

<div class="flex items-center bg-gray-100  text-gray-800">
  <div class="p-4 w-full">
    <div class="grid grid-cols-12 gap-4">
      <div class="col-span-12 sm:col-span-6 md:col-span-3">
        <div class="flex flex-row bg-white shadow-sm rounded p-4">

          <div class="flex flex-col flex-grow ml-4">
            <div class="text-sm text-gray-500">
<div class="col-span-12 lg:col-span-8">
                        <a href="#" class="inline-block rounded-full text-black
                            text-xs font-bold ">
                           Dow Jones
                        </a>
                    </div></div>
            <div class="font-bold text-lg">31,097.97</div>
             <span class="text-gray-500">- 0.00%</span>
          </div>
        </div>
      </div>
      <div class="col-span-12 sm:col-span-6 md:col-span-3">
               <div class="flex flex-row bg-white shadow-sm rounded p-4">

          <div class="flex flex-col flex-grow ml-4">
            <div class="text-sm text-gray-500">
<div class="col-span-12 lg:col-span-8">
                        <a href="#" class="inline-block rounded-full text-black
                            text-xs font-bold ">
                            S&P 500
                        </a>
                    </div></div>
            <div class="font-bold text-lg">3,824.68</div>
            <span class="text-gray-500">- 0.00%</span>
          </div>
        </div>
      </div>
      <div class="col-span-12 sm:col-span-6 md:col-span-3">
                <div class="flex flex-row bg-white shadow-sm rounded p-4">

          <div class="flex flex-col flex-grow ml-4">
            <div class="text-sm text-gray-500">
<div class="col-span-12 lg:col-span-8">
                        <a href="#" class="inline-block rounded-full text-black
                            text-xs font-bold ">
                            NASDAQ
                        </a>
                    </div></div>
            <div class="font-bold text-lg">13,201.98</div>
            <span class="text-red-500">▲ 1.03%</span>
          </div>
        </div>
      </div>
      <div class="col-span-12 sm:col-span-6 md:col-span-3">
        <div class="flex flex-row bg-white shadow-sm rounded">

          <div id="empty-cover-art" class="py-3 h-full rounded sm:w-full  text-center opacity-50 md:border-solid md:border-2 md:border-gray-400">
 <center><svg width="48" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
</svg></center>
  <div class="">
    See More
  </div>
</div>

        </div>


      </div>
    </div>
  </div>
</div>

<header class="flex-none flex h-16 bg-gray-100 border-t px-4 items-center">
    
      <h1 class="font-semibold text-lg">Most Followed</h1>

    </header>
    <div class="flex items-center bg-gray-100  text-gray-800">
  <div class="p-4 w-full">
    <div class="grid grid-cols-12 gap-4">
      <div class="col-span-12 sm:col-span-6 md:col-span-3">
        <div class="flex flex-row bg-white shadow-sm rounded p-4">

          <div class="flex flex-col flex-grow ml-4">
            <div class="text-sm text-gray-500">
<div class="col-span-12 lg:col-span-8">
                        <a href="#" class="inline-block rounded-full text-white 
                            bg-indigo-700
                            text-xs font-bold 
                            mr-1 md:mr-2 mb-2 px-2 md:px-4 py-1 ">
                            005930
                        </a>
                    </div></div>
            <div class="font-bold text-lg">23.6K </div>
            <div class="text-gray-300 text-sm">Followers</div>

          </div>
        </div>
      </div>
      <div class="col-span-12 sm:col-span-6 md:col-span-3">
               <div class="flex flex-row bg-white shadow-sm rounded p-4">

          <div class="flex flex-col flex-grow ml-4">
            <div class="text-sm text-gray-500">
<div class="col-span-12 lg:col-span-8">
                        <a href="#" class="inline-block rounded-full text-white 
                            bg-black
                            text-xs font-bold 
                            mr-1 md:mr-2 mb-2 px-2 md:px-4 py-1 ">
                            AAPL
                        </a>
                    </div></div>
    <div class="font-bold text-lg">13.8K </div>
            <div class="text-gray-300 text-sm">Followers</div>
          </div>
        </div>
      </div>
      <div class="col-span-12 sm:col-span-6 md:col-span-3">
                <div class="flex flex-row bg-white shadow-sm rounded p-4">

          <div class="flex flex-col flex-grow ml-4">
            <div class="text-sm text-gray-500">
<div class="col-span-12 lg:col-span-8">
                           <a href="#" class="inline-block rounded-full text-white 
                            bg-black
                            text-xs font-bold 
                            mr-1 md:mr-2 mb-2 px-2 md:px-4 py-1 ">
                            TSLA
                        </a>     
                    </div></div>
         <div class="font-bold text-lg">23.6K </div>
            <div class="text-gray-300 text-sm">Followers</div>
          </div>
        </div>
      </div>
      <div class="col-span-12 sm:col-span-6 md:col-span-3">
                       <div class="flex flex-row bg-white shadow-sm rounded p-4">

          <div class="flex flex-col flex-grow ml-4">
            <div class="text-sm text-gray-500">
<div class="col-span-12 lg:col-span-8">
                         <a href="#" class="inline-block rounded-full text-white 
                            bg-yellow-700
                            text-xs font-bold 
                            mr-1 md:mr-2 mb-2 px-2 md:px-4 py-1 ">
                            GOOGL
                        </a>   
                    </div></div>
                 <div class="font-bold text-lg">7.74K </div>
            <div class="text-gray-300 text-sm">Followers</div>
          </div>
        </div>
      </div></div></div></div>

<header class="flex-none flex h-16 bg-gray-100 border-t px-4 items-center">
    
      <h1 class="font-semibold text-lg">Market Status</h1>

    </header>
<header class="flex-none flex  bg-gray-100 px-4 items-center">

     <a href="#" class="inline-block rounded-full text-blue-700
                            bg-blue-100
                            text-xs font-bold 
                            mr-1 md:mr-2 mb-2 px-2 md:px-4 py-1 ">
                           Hot
                        </a>
         <a href="#" class="inline-block rounded-full text-black
                            
                            text-xs 
                            mr-1 md:mr-2 mb-2 px-2 md:px-4 py-1 ">
                            Upside
                        </a>
         <a href="#" class="inline-block rounded-full text-black
                            
                            text-xs 
                            mr-1 md:mr-2 mb-2 px-2 md:px-4 py-1 ">
                            Downside
                        </a>
    </header>

   <ul class="flex flex-col bg-gray-100 p-4">

             <li class="border-gray-400 flex flex-row mb-2">
          <div class="select-none cursor-pointer bg-white rounded-md flex flex-1 items-center p-4  transition duration-200 ease-in-out transform hover:-translate-y-1 hover:shadow">
            <div class="flex-1 pl-1 mr-16">
              <div class="font-medium">Company A</div>
              <div class="text-gray-600 text-sm"> <a href="#" class="inline-block rounded-full text-white 
                            bg-yellow-700
                            text-xs font-bold 
                            mr-1 md:mr-2 mb-2 px-2 md:px-4 py-1 ">
                            COMPA
                        </a>   </div>
            </div>
            <div class="text-red-500 ">↑ 3.45%</div>
          </div>
        </li>
             <li class="border-gray-400 flex flex-row mb-2">
          <div class="select-none cursor-pointer bg-white rounded-md flex flex-1 items-center p-4  transition duration-200 ease-in-out transform hover:-translate-y-1 hover:shadow">
            <div class="flex-1 pl-1 mr-16">
              <div class="font-medium">Company B</div>
              <div class="text-gray-600 text-sm"> <a href="#" class="inline-block rounded-full text-white 
                            bg-pink-300
                            text-xs font-bold 
                            mr-1 md:mr-2 mb-2 px-2 md:px-4 py-1 ">
                            COMPB
                        </a>   </div>
            </div>
            <div class="text-gray-500 ">- 0.0%</div>
          </div>
        </li>
                 <li class="border-gray-400 flex flex-row mb-2">
          <div class="select-none cursor-pointer bg-white rounded-md flex flex-1 items-center p-4  transition duration-200 ease-in-out transform hover:-translate-y-1 hover:shadow">
            <div class="flex-1 pl-1 mr-16">
              <div class="font-medium">Company C</div>
              <div class="text-blue-500 text-sm"> <a href="#" class="inline-block rounded-full text-white 
                            bg-blue-500
                            text-xs font-bold 
                            mr-1 md:mr-2 mb-2 px-2 md:px-4 py-1 ">
                            COMPC
                        </a>   </div>
            </div>
            <div class="text-blue-500 ">↓ 56.78%</div>
          </div>
        </li>
    </ul>

How to build a Stock page with Tailwind CSS?

Install tailwind css of verion 2.0.2

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

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

All the unility class needed to build a Stock page component

  • text-gray-100
  • bg-white
  • w-full
  • mx-auto
  • flex
  • flex-wrap
  • flex-col
  • md:flex-row
  • lg:w-2/5
  • inline-flex
  • ml-5
  • lg:ml-0
  • bg-gray-100
  • h-10
  • px-5
  • pr-10
  • text-sm
  • absolute
  • right-0
  • top-0
  • mt-3
  • mr-4
  • h-4
  • w-4
  • flex-none
  • h-16
  • border-t
  • px-4
  • text-lg
  • text-gray-800
  • p-4
  • grid
  • grid-cols-12
  • gap-4
  • flex-row
  • flex-grow
  • ml-4
  • text-gray-500
  • inline-block
  • text-white
  • text-xs
  • mr-1
  • md:mr-2
  • mb-2
  • px-2
  • md:px-4
  • py-1
  • text-red-500
  • text-blue-500
  • py-5
  • h-full
  • sm:w-full
  • text-center
  • md:border-solid
  • md:border-2
  • md:border-gray-400
  • bg-cover
  • bg-center
  • h-auto
  • py-24
  • px-10
  • md:w-1/2
  • mb-10
  • py-3
  • text-gray-300
  • border-gray-400
  • flex-1
  • pl-1
  • mr-16
  • text-gray-600

70 steps to build a Stock page component with Tailwind CSS

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

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

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

  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. Use flex to create a block-level flex container.

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

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

  10. Use inline-flex to create an inline flex container that flows with text.

  11. Control the margin on left side of an element to 1.25rem using the ml-5 utilities.

  12. Control the margin on left side of an element to 0rem at only large screen sizes using the lg:ml-0 utilities.

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

  14. Use h-10 to set an element to a fixed height(2.5rem).

  15. Control the horizontal padding of an element to 1.25rem using the px-5 utilities.

  16. Control the padding on right side of an element to 2.5rem using the pr-10 utilities.

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

  18. 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.

  19. Use the right-0 utilities to set the right position of a positioned element to 0rem.

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

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

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

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

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

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

  26. Use h-16 to set an element to a fixed height(4rem).

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

  28. Control the horizontal padding of an element to 1rem using the px-4 utilities.

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

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

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

  32. Use grid to create a grid container.

  33. Use grid to create a grid container.

  34. To specify the width between columns, you can use the gap-4 utilities.

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

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

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

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

  39. Use inline-block utilities to wrap the element to prevent the text inside from extending beyond its parent.

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

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

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

  43. Control the margin on right side of an element to 0.5rem at only medium screen sizes using the md:mr-2 utilities.

  44. Control the margin on bottom side of an element to 0.5rem using the mb-2 utilities.

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

  46. Control the horizontal padding of an element to 1rem at only medium screen sizes using the md:px-4 utilities.

  47. Control the vertical padding of an element to 0.25rem using the py-1 utilities.

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

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

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

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

  52. Use w-full to set an element to a 100% based width at only small screen sizes.

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

  54. Control the border color of an element to solid using the md:border-solid utilities at only medium screen sizes.

  55. Control the border color of an element to 0.5rem using the md:border-2 utilities at only medium screen sizes.

  56. Control the border color of an element to gray-400 using the md:border-gray-400 utilities at only medium screen sizes.

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

  58. Control the background color of an element to center using the bg-center utilities.

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

  60. Control the vertical padding of an element to 6rem using the py-24 utilities.

  61. Control the horizontal padding of an element to 2.5rem using the px-10 utilities.

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

  63. Control the margin on bottom side of an element to 2.5rem using the mb-10 utilities.

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

  65. Control the text color of an element to gray-300 using the text-gray-300 utilities.

  66. Control the border color of an element to gray-400 using the border-gray-400 utilities.

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

  68. Set the left padding of an element to 0.25rem using the pl-1 utilities class

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

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

Conclusion

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