CSS

Download
<link href="https://www.your-website.com/css/fds.css" rel="stylesheet" />

Primary Button

<button class="bg-tra-blue-50 hover:ring-tra-blue-10 focus:ring-tra-blue-10 text-pure-white-100 focus:ring-4 hover:ring-4 border-transparent h-10 cursor-pointer border inline-flex items-center justify-center px-5 py-3 text-sm leading-4 rounded-md focus:outline-none transition-color duration-200">Primary Button</button>

Primary Button Disabled

<button disabled class="text-pure-white-100 bg-uae-black-20 border-transparent h-10 cursor-not-allowed border inline-flex items-center justify-center px-5 py-3 text-sm leading-4 rounded-md">Primary Button</button>

Secondary Button

<button class="text-tra-blue-50 border-tra-blue-50 hover:bg-tra-blue-50 hover:bg-opacity-5 focus:bg-tra-blue-50 focus:bg-opacity-5 h-10 cursor-pointer border inline-flex items-center px-5 py-3 text-sm leading-4 rounded-md focus:outline-none transition-color duration-200">Secondary Button</button>

Secondary Button Disabled

<button disabled class="text-uae-black-20 border-uae-black-20 h-10 cursor-not-allowed border inline-flex items-center px-5 py-3 text-sm leading-4 rounded-md">Secondary Button</button>

Text Button

<button class="group text-tra-blue-50 border-transparent h-10 cursor-pointer border inline-flex items-center justify-center px-5 hover:bg-tra-blue-50 focus:bg-tra-blue-50 hover:bg-opacity-5 focus:bg-opacity-5 py-3 text-sm leading-4 rounded-md outline-none focus:outline-none transition-color duration-200"> Text Button </button>

Text Button Disabled

<button disabled class="text-uae-black-20 border-transparent h-10 cursor-not-allowed border inline-flex justify-center items-center px-5 py-3 text-sm leading-4 rounded-md">Text Button</button>

Icon Button

<button class="text-tra-blue-50 border-transparent hover:bg-tra-blue-50 focus:bg-tra-blue-50 hover:bg-opacity-5 focus:bg-opacity-5 h-10 cursor-pointer border inline-flex items-center justify-center p-2 text-sm leading-4 rounded-md focus:outline-none transition-color duration-200">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
    <path fill="currentColor" d="..." />
  </svg>
</button>

Icon Button Disabled

<button disabled class="text-uae-black-20 border-transparent h-10 cursor-not-allowed border inline-flex items-center p-2 text-sm leading-4 rounded-md">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
    <path fill="currentColor" d="..." />
  </svg>
</button>

Tabs

Notes:

  • Needs correct icons.
<nav>
  <ul class="w-full">
    <li>
      <button disabled class="w-full h-10 text-pure-white-100 bg-tra-blue-50 border-transparent cursor-not-allowed border inline-flex items-center pl-3 pr-5 py-3 leading-4 rounded-md transition-color duration-200">
        <span>
          <svg height="24px" width="24px" fill="currentColor" viewBox="0 0 24 24">
            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
              <path d="..." />
            </g>
          </svg>
        </span>
        <span class="pl-4">Most Used</span>
      </button>
    </li>
    <li class="mt-2">
      <button class="group w-full h-10 text-uae-black-100 hover:text-tra-blue-50 border-transparent hover:bg-tra-blue-50 focus:bg-tra-blue-50 hover:bg-opacity-5 focus:bg-opacity-5 border-transparent cursor-pointer border inline-flex items-center pl-3 pr-5 py-3 leading-4 rounded-md outline-none focus:outline-none transition-color duration-200">
        <span class="text-uae-black-50 group-hover:text-tra-blue-50">
          <svg height="24px" width="24px" fill="currentColor" viewBox="0 0 24 24">
            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
              <path d="..." />
            </g>
          </svg>
        </span>
        <span class="pl-4">All Services</span>
      </button>
    </li>
    <li class="mt-2">
      <button class="group w-full h-10 text-uae-black-100 hover:text-tra-blue-50 border-transparent hover:bg-tra-blue-50 focus:bg-tra-blue-50 hover:bg-opacity-5 focus:bg-opacity-5 border-transparent cursor-pointer border inline-flex items-center pl-3 pr-5 py-3 leading-4 rounded-md outline-none focus:outline-none transition-color duration-200">
        <span class="text-uae-black-50 group-hover:text-tra-blue-50">
          <svg height="24px" width="24px" fill="currentColor" viewBox="0 0 24 24">
            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
              <path d="..." />
            </g>
          </svg>
        </span>
        <span class="pl-4">Government</span>
      </button>
    </li>
  </ul>
</nav>

Floating Bar

<div role="alert" class="text-pure-white-100 bg-uae-black-90 shadow-md w-full h-11 flex items-center px-5 py-3 rounded-md">
  <span>
    <svg height="24px" width="24px" fill="currentColor" viewBox="0 0 24 24">
      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <path d="..." />
      </g>
    </svg>
  </span>
  <span class="px-4 flex-1 text-sm leading-4">TRA Conference is now LIVE on YouTube</span>
  <span>
    <a class="bg-pure-white-100 text-uae-black-100 text-xs rounded h-7 inline-flex items-center px-3 hover:bg-pure-white-20 transition-color duration-200" href="#">Watch now</a>
  </span>
  <span class="pl-6">
    <button class="text-pure-white-100 hover:text-pure-white-20 transition-color duration-200">
      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24">
        <path fill="currentColor" d="..." />
      </svg>
    </button>
  </span>
</div>

Pop Up Notification

<div role="dialog" class="rounded-lg bg-pure-white-100 relative w-72 p-5" open="">
  <button class="absolute top-0 right-0 p-4 leading-none opacity-20 hover:opacity-100">
    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24">
      <path d="..." />
    </svg>
  </button>
  <div class="mt-6">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
      <path fill="currentColor" d="..." />
    </svg>
    <p class="mt-6 text-xl pr-10">TRA Conference is now LIVE on YouTube</p>
    <p class="mt-2 text-sm font-light opacity-70">It's free for everyone</p>
    <div class="mt-12 grid grid-cols-2 gap-4">
      <button class="bg-tra-blue-50 hover:ring-tra-blue-10 focus:ring-tra-blue-10 text-pure-white-100 focus:ring-4 hover:ring-4 border-transparent h-10 cursor-pointer border inline-flex items-center justify-center px-5 py-3 text-sm leading-4 rounded-md focus:outline-none transition-color duration-200">Watch Now</button>
      <button class="group text-uae-black-30 border-transparent h-10 cursor-pointer border inline-flex items-center justify-center px-5 hover:bg-tra-blue-50 focus:bg-tra-blue-50 hover:bg-opacity-5 focus:bg-opacity-5 py-3 text-sm leading-4 rounded-md outline-none focus:outline-none transition-color duration-200">Not Now</button>
    </div>
  </div>
</div>

Data Card

Prohibited Content

Statistics of Prohibited Content

Notes:

Graph graphic will need to be Javascript powered at point of integration. 
<div class="bg-pure-white-100 rounded-lg shadow-sm">
  <div class="p-6 pb-0">
    <h3 class="font-medium tracking-wide text-xl">Prohibited Content</h3>
    <p class="mt-1 opacity-60 font-light">Statistics of Prohibited Content</p>
    <div class="mt-10 w-full h-20 bg-tra-blue-50 bg-opacity-5" />
  </div>
  <div class="mt-6 border-t border-tra-blue-50 border-opacity-5 p-6">
    <button class="group text-uae-black-100 border-uae-black-100 hover:border-tra-blue-50 hover:text-pure-white-100 hover:bg-tra-blue-50 focus:bg-tra-blue-50 focus:text-pure-white-100 h-10 cursor-pointer border inline-flex items-center text-sm leading-4 rounded-md focus:outline-none">
      <span class="px-4">Download</span>
      <span class="w-px h-full group-hover:bg-tra-blue-40 group-focus:bg-tra-blue-40 bg-uae-black-100" />
      <span class="px-3 flex items-center justify-center w-full h-full group-hover:bg-tra-blue-40 group-focus:bg-tra-blue-40 rounded-tr rounded-br">
        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24">
          <path fill="currentColor" d="..." />
        </svg>
      </span>
    </button>
  </div>
</div>

Service Card

Wireless Authorization
The e-Commerce promote adherence to regulatory 
<div class="group relative bg-tra-blue-50 bg-opacity-5 hover:bg-tra-blue-50 rounded-lg shadow-sm p-7 pt-20 transition-color duration-200">
  <div class="group-hover:text-pure-white-100 text-xl w-1/2 leading-tight transform translate-y-full group-hover:-translate-y-2/4 transition duration-300 ease-out"> Wireless Authorization </div>
  <div class="mt-2 w-2/3 leading-tight opacity-0 group-hover:opacity-70 text-pure-white-100 transform group-hover:-translate-y-2/4 transition duration-300 delay-75 ease-out"> The e-Commerce promote adherence to regulatory </div>
  <span class="absolute bottom-0 right-0 p-6 group-hover:text-pure-white-100 transform transition-transform group-hover:scale-150">
    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24">
      <path fill="currentColor" d="..." />
    </svg>
  </span>
</div>

Card example #1

TRA sustainability efforts

Infrastructure, Role, UAE National Agenda

<div class="bg-pure-white-100 rounded-3xl shadow-sm p-10 flex flex-col justify-between">
  <div class="w-full">
    <h3 class="text-2xl">TRA sustainability efforts</h3>
    <p class="mt-2">Infrastructure, Role, UAE National Agenda</p>
  </div>
  <div class="w-full mt-10">
    <button class="group text-tra-blue-50 border-transparent h-10 cursor-pointer border inline-flex items-center justify-center pr-5 py-3 text-sm leading-4 rounded-md outline-none focus:outline-none transition-color duration-200">
      <span class="pr-3 group-hover:scale-110 group-focus:scale-110 transform transition-transform duration-300 ease-in-out">
        <svg class="text-uae-gold-50" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
          <g fill="none" stroke="currentColor" stroke-width="2">
            <rect width="32" height="32" rx="16" stroke="none" />
            <rect x="1" y="1" width="30" height="30" rx="15" />
          </g>
          <g fill="none" stroke="currentColor" stroke-width="2">
            <path stroke-linejoin="round" d="..." />
            <path d="..." />
          </g>
        </svg>
      </span>
      <span class="text-base text-uae-gold-50 transform transition-transform duration-200 group-hover:translate-x-1 ease-in-out"> Check now </span>
    </button>
  </div>
</div>

Card example #2

TRA sustainability efforts

Infrastructure, Role, UAE National Agenda

<div class="bg-pure-white-100 rounded-3xl shadow-sm p-10 flex flex-col justify-between">
  <div class="w-full">
    <h3 class="text-2xl">TRA sustainability efforts</h3>
    <p class="mt-2">Infrastructure, Role, UAE National Agenda</p>
  </div>
  <div class="w-full mt-10">
    <button class="bg-uae-gold-50 hover:ring-uae-gold-10 focus:ring-uae-gold-10 text-pure-white-100 focus:ring-4 hover:ring-4 border-transparent h-10 cursor-pointer border inline-flex items-center justify-center px-5 py-3 text-sm leading-4 rounded-md focus:outline-none transition-color duration-200"> Download </button>
  </div>
</div>

Card more

+23 more

<div class="bg-pure-white-100 bg-opacity-60 rounded-3xl shadow-sm p-10 flex flex-col justify-between" style="max-width: 240px;">
  <div class="w-full">
    <p class="text-xl">+23 more</p>
  </div>
  <div class="w-full mt-10">
    <button class="group text-tra-blue-50 border-transparent h-10 cursor-pointer border inline-flex items-center justify-center pr-5 py-3 text-sm leading-4 rounded-md outline-none focus:outline-none transition-color duration-200">
      <span class="pr-3 group-hover:scale-110 group-focus:scale-110 transform transition-transform duration-300 ease-in-out">
        <svg class="text-uae-gold-70" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
          <g fill="none" stroke="currentColor" stroke-width="2">
            <rect width="32" height="32" rx="16" stroke="none" />
            <rect x="1" y="1" width="30" height="30" rx="15" />
          </g>
          <g fill="none" stroke="currentColor" stroke-width="2">
            <path stroke-linejoin="round" d="..." />
            <path d="..." />
          </g>
        </svg>
      </span>
      <span class="text-base text-uae-gold-70 transform transition-transform duration-200 group-hover:translate-x-1 ease-in-out"> See all </span>
    </button>
  </div>
</div>

Login Modal

Login

Forgot password?

OR

Don't have an account? Register now

<section class="bg-pure-white-100 rounded-xl shadow-lg p-8 mx-auto max-w-sm">
  <form action="">
    <h1 class="text-xl">Login</h1>
    <label for="email" class="sr-only">Email</label>
    <input placeholder="Email" id="email" type="email" autocomplete="username" class="mt-5 focus:outline-none focus:ring-4 focus:ring focus:ring-uae-gold-10 focus:border-uae-gold-30 border border-uae-black-20 py-3 px-5 shadow-sm block w-full rounded-md" />
    <label for="password" class="sr-only">Email</label>
    <input placeholder="Password" id="password" type="password" autocomplete="current-password" class="mt-5 focus:outline-none focus:ring-4 focus:ring focus:ring-uae-gold-10 focus:border-uae-gold-30 border border-uae-black-20 py-3 px-5 shadow-sm block w-full rounded-md" />
    <a class="inline-block mt-3 text-sm opacity-50" href="#">Forgot password?</a>
    <button class="py-6 mt-6 block w-full bg-uae-gold-70 hover:ring-uae-gold-10 focus:ring-uae-gold-10 text-pure-white-100 focus:ring-4 hover:ring-4 border-transparent h-10 cursor-pointer border inline-flex items-center justify-center px-5 py-3 text-sm leading-4 rounded-md focus:outline-none transition-color duration-200">
      <span class="text-lg">Sign in</span>
    </button>
  </form>
  <p class="text-center mt-4 opacity-50">OR</p>
  <button class="py-6 mt-4 flex items-center block w-full bg-pure-white-50 hover:ring-pure-white-20 focus:ring-pure-white-20 text-pure-white-100 focus:ring-4 hover:ring-4 border-transparent h-10 cursor-pointer border inline-flex items-center justify-center px-5 py-3 text-sm leading-4 rounded-md focus:outline-none transition-color duration-200">
    <span>
      <img class="h-6" src="/fingerprint.png" alt="" />
    </span>
    <span class="text-uae-black-100 pl-4 text-lg">Continue with UAE PASS</span>
  </button>
  <hr class="mt-7 opacity-10" />
  <p class="mt-6 text-center text-sm text-uae-black-50">
    <a class="text-uae-gold-50 hover:underline" href="#">Register now</a>
  </p>
</section>

Text Input (Outlined)

Helper text

<div>
  <label class="text-uae-black-100 text-opacity-70 transition-color duration-300" for="outlined-input">Outlined input</label>
  <input id="outlined-input" type="text" class="mt-1 border text-uae-black-60 focus:text-uae-black-80 rounded-md h-12 w-full px-4 outline-none focus:outline-none focus:ring focus:ring-1 transition-color duration-300 border-opacity-30 border-uae-black-100 focus:border-tra-blue focus:border-opacity-100 focus:ring-tra-blue hover:border-opacity-100" />
  <p class="mt-1.5 text-sm text-uae-black-100 text-opacity-50">Helper text</p>
</div>

Text Input (Valid)

<div>
  <label class="text-uae-black-100 text-opacity-70 transition-color duration-300" for="valid-input">Valid input</label>
  <div class="relative">
    <input id="valid-input" type="text" class="mt-1 border text-uae-black-60 focus:text-uae-black-80 rounded-md h-12 w-full px-4 outline-none focus:outline-none focus:ring focus:ring-1 transition-color duration-300 ring-1 border-uae-green hover:border-uae-green ring-uae-green pr-10" />
    <div class="mt-1 pointer-events-none absolute inset-y-0 right-0 flex items-center p-4 text-uae-green">
      <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
        <path fill="currentColor" d="..." />
      </svg>
    </div>
  </div>
</div>

Text Input (Invalid)

<div>
  <label class="text-uae-black-100 text-opacity-70 transition-color duration-300" for="invalid-input">Invalid input</label>
  <div class="relative">
    <input id="invalid-input" type="text" class="mt-1 border text-uae-black-60 focus:text-uae-black-80 rounded-md h-12 w-full px-4 outline-none focus:outline-none focus:ring focus:ring-1 transition-color duration-300 ring-1 border-uae-red-60 hover:border-uae-red-60 ring-uae-red-60 bg-uae-red-10 bg-opacity-10 pr-10" />
    <div class="mt-1 pointer-events-none absolute inset-y-0 right-0 flex items-center p-4 text-uae-red-60">
      <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
        <path fill="currentColor" d="..." />
      </svg>
    </div>
  </div>
</div>

Text Input (Disabled)

<div class="opacity-50">
  <label class="text-uae-black-100 text-opacity-70 transition-color duration-300" for="disabled-input">Disabled input</label>
  <input id="disabled-input" type="text" disabled class="mt-1 border text-uae-black-60 focus:text-uae-black-80 rounded-md h-12 w-full px-4 outline-none focus:outline-none focus:ring focus:ring-1 transition-color duration-300 border-opacity-30 border-uae-black-100 focus:border-tra-blue focus:border-opacity-100 focus:ring-tra-blue" />
</div>

Icon input

<div>
  <label class="text-uae-black-100 text-opacity-70 transition-color duration-300" for="icon-input">Icon input</label>
  <div class="relative">
    <input id="icon-input" type="text" class="mt-1 border text-uae-black-60 focus:text-uae-black-80 rounded-md h-12 w-full px-4 outline-none focus:outline-none focus:ring focus:ring-1 transition-color duration-300 border-opacity-30 border-uae-black-100 focus:border-tra-blue focus:border-opacity-100 focus:ring-tra-blue hover:border-opacity-100 pl-11" />
    <div class="mt-1 pointer-events-none absolute inset-y-0 left-0 flex items-center p-4">
      <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
        <path d="..." />
      </svg>
    </div>
  </div>
</div>

Text Area

<div>
  <label class="text-uae-black-100 text-opacity-70 transition-color duration-300" for="text-area">Text area</label>
  <textarea class="mt-1 min-h-[100px] border text-uae-black-60 focus:text-uae-black-80 rounded-md h-12 w-full p-4 outline-none focus:outline-none focus:ring focus:ring-1 border-uae-black-40 focus:ring-tra-blue hover:border-uae-black-80" />
</div>

Checkbox

Notes:

Requires Javascript to change visual state.
<div class="flex items-start group">
  <label for="checkbox" class="relative w-6 h-6 cursor-pointer">
    <span class="opacity-0 group-hover:opacity-100 transition transition-opacity duration-300 block pointer-events-none absolute w-full h-full bg-uae-black-10 inset-0 rounded-full transform scale-[2]" />
    <input type="checkbox" id="checkbox" class="h-full w-full opacity-10" />
    <span class="block pointer-events-none absolute w-full h-full border-2 border-uae-black-100 border-opacity-30 group-hover:border-opacity-100 inset-0 rounded flex items-center justify-center transition transition-color duration-300" />
  </label>
  <label class="text-uae-black-100 text-opacity-70 transition-color duration-300 pl-4 group-hover:text-uae-black-100" for="checkbox">Remember me</label>
</div>

Radio

Notes:

Requires Javascript to change visual state.
<div class="flex items-start group">
  <label for="radio-left" class="relative w-6 h-6 cursor-pointer">
    <span class="opacity-0 group-hover:opacity-100 transition transition-opacity duration-300 block pointer-events-none absolute w-full h-full bg-uae-black-10 inset-0 rounded-full transform scale-[2]" />
    <input type="radio" id="radio-left" name="radio" value="radio-left" class="h-full w-full opacity-0" />
    <span class="block pointer-events-none absolute w-full h-full border-2 border-uae-black-100 border-opacity-30 group-hover:border-opacity-100 inset-0 rounded-full flex items-center justify-center transition transition-color duration-300 p-1 border-tra-blue border-opacity-100">
      <span class="block bg-tra-blue h-full w-full rounded-full" />
    </span>
  </label>
  <label class="text-uae-black-100 text-opacity-70 transition-color duration-300 pl-4 group-hover:text-uae-black-100" for="radio-left">Left</label>
</div>

Select menu

Choose the country on your passport.

Notes:

Requires Javascript to change visual state.
<div>
  <label class="text-uae-black-100 text-opacity-70 transition-color duration-300" for="select">Nationality</label>
  <div class="relative">
    <select class="mt-1.5 block appearance-none w-full py-3 px-4 pr-8 rounded leading-tight duration-300 transition-color border border-opacity-30 hover:border-opacity-100 border-uae-black-100 focus:border-tra-blue focus:border-opacity-100 focus:ring-tra-blue" name="select" id="select">
      <option>Arabic</option>
    </select>
    <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
      <svg class="fill-current h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
        <path d="..." />
      </svg>
    </div>
  </div>
  <p class="mt-1.5 text-sm text-uae-black-100 text-opacity-50">Choose the country on your passport.</p>
</div>

Tags

Notes:

Requires Javascript to change visual state.
<div>
  <button class="appearance-none flex items-center border rounded-lg px-3 py-1.5 focus:outline-none border-uae-black-100 border-opacity-30 hover:bg-uae-black-100 hover:bg-opacity-10 hover:border-opacity-100">
    <span>Tag label</span>
  </button>
</div>

One-line table

Sample titleSample
List item on one line.Sample data
List item on one line.Sample data
List item on one line.Sample data
List item on one line.Sample data
List item on one line.Sample data 
<div class="border border-uae-black-100 border-opacity-30 rounded-lg">
  <table class="w-full">
    <thead>
      <tr class="border-b-2 border-uae-black-100 border-opacity-30 leading-none">
        <th class="px-10 py-6 font-medium">Sample title</th>
        <th class="px-10 py-6 font-medium">Sample</th>
      </tr>
    </thead>
    <tbody>
      <tr class="border-b border-uae-black-100 border-opacity-10 leading-none">
        <td class="px-10 py-6">List item on one line.</td>
        <td class="px-10 py-6">Sample data </td>
      </tr>
      <tr class="border-b border-uae-black-100 border-opacity-10 leading-none">
        <td class="px-10 py-6">List item on one line.</td>
        <td class="px-10 py-6">Sample data </td>
      </tr>
      <tr class="border-b border-uae-black-100 border-opacity-10 leading-none">
        <td class="px-10 py-6">List item on one line.</td>
        <td class="px-10 py-6">Sample data </td>
      </tr>
      <tr class="border-b border-uae-black-100 border-opacity-10 leading-none">
        <td class="px-10 py-6">List item on one line.</td>
        <td class="px-10 py-6">Sample data </td>
      </tr>
      <tr class="leading-none">
        <td class="px-10 py-6">List item on one line.</td>
        <td class="px-10 py-6">Sample data </td>
      </tr>
    </tbody>
  </table>
</div>

Two-line table

Sample titleSample

List item on one line.

Sample description text

Sample data

List item on one line.

Sample description text

Sample data

List item on one line.

Sample description text

Sample data

List item on one line.

Sample description text

Sample data

List item on one line.

Sample description text

Sample data 
<div class="border border-uae-black-100 border-opacity-30 rounded-lg">
  <table class="w-full">
    <thead>
      <tr class="border-b-2 border-uae-black-100 border-opacity-30 leading-none">
        <th class="px-10 py-6 font-medium">Sample title</th>
        <th class="px-10 py-6 font-medium">Sample</th>
      </tr>
    </thead>
    <tbody>
      <tr class="border-b border-uae-black-100 border-opacity-10">
        <td class="px-10 py-6">
          <p class="text-lg">List item on one line.</p>
          <p class="text-uae-black-100 text-opacity-60">Sample description text</p>
        </td>
        <td class="px-10 py-6">Sample data </td>
      </tr>
      <tr class="border-b border-uae-black-100 border-opacity-10">
        <td class="px-10 py-6">
          <p class="text-lg">List item on one line.</p>
          <p class="text-uae-black-100 text-opacity-60">Sample description text</p>
        </td>
        <td class="px-10 py-6">Sample data </td>
      </tr>
      <tr class="border-b border-uae-black-100 border-opacity-10">
        <td class="px-10 py-6">
          <p class="text-lg">List item on one line.</p>
          <p class="text-uae-black-100 text-opacity-60">Sample description text</p>
        </td>
        <td class="px-10 py-6">Sample data </td>
      </tr>
      <tr class="border-b border-uae-black-100 border-opacity-10">
        <td class="px-10 py-6">
          <p class="text-lg">List item on one line.</p>
          <p class="text-uae-black-100 text-opacity-60">Sample description text</p>
        </td>
        <td class="px-10 py-6">Sample data </td>
      </tr>
      <tr class="">
        <td class="px-10 py-6">
          <p class="text-lg">List item on one line.</p>
          <p class="text-uae-black-100 text-opacity-60">Sample description text</p>
        </td>
        <td class="px-10 py-6">Sample data </td>
      </tr>
    </tbody>
  </table>
</div>

Icon list

  • List item on one line.

    Sample description text

  • List item on one line.

    Sample description text

  • List item on one line.

    Sample description text

<ul class="w-full border border-uae-black-100 border-opacity-30 rounded-lg">
  <li class="p-6 border-b border-uae-black-100 border-opacity-10">
    <div class="flex items-center justify-between">
      <div class="w-6">
        <svg class="w-full h-auto" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
          <path fill="currentColor" d="..." />
        </svg>
      </div>
      <div class="pl-6 flex-1">
        <p class="text-lg">List item on one line.</p>
        <p class="text-uae-black-100 text-opacity-60">Sample description text</p>
      </div>
    </div>
  </li>
  <li class="p-6 border-b border-uae-black-100 border-opacity-10">
    <div class="flex items-center justify-between">
      <div class="w-6">
        <svg class="w-full h-auto" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
          <path fill="currentColor" d="..." />
        </svg>
      </div>
      <div class="pl-6 flex-1">
        <p class="text-lg">List item on one line.</p>
        <p class="text-uae-black-100 text-opacity-60">Sample description text</p>
      </div>
    </div>
  </li>
  <li class="p-6">
    <div class="flex items-center justify-between">
      <div class="w-6">
        <svg class="w-full h-auto" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
          <path fill="currentColor" d="..." />
        </svg>
      </div>
      <div class="pl-6 flex-1">
        <p class="text-lg">List item on one line.</p>
        <p class="text-uae-black-100 text-opacity-60">Sample description text</p>
      </div>
    </div>
  </li>
</ul>

Button list

  • List item on one line.

    Sample description text

  • List item on one line.

    Sample description text

  • List item on one line.

    Sample description text

<ul class="w-full border border-uae-black-100 border-opacity-30 rounded-lg">
  <li class="p-6 border-b border-uae-black-100 border-opacity-10">
    <div class="flex items-center justify-between">
      <div class="pr-6 flex-1">
        <p class="text-lg">List item on one line.</p>
        <p class="text-uae-black-100 text-opacity-60">Sample description text</p>
      </div>
      <div>
        <button class="bg-tra-blue-50 hover:ring-tra-blue-10 focus:ring-tra-blue-10 text-pure-white-100 focus:ring-4 hover:ring-4 border-transparent h-10 cursor-pointer border inline-flex items-center justify-center px-5 py-3 text-sm leading-4 rounded-md focus:outline-none transition-color duration-200">Button</button>
      </div>
    </div>
  </li>
  <li class="p-6 border-b border-uae-black-100 border-opacity-10">
    <div class="flex items-center justify-between">
      <div class="pr-6 flex-1">
        <p class="text-lg">List item on one line.</p>
        <p class="text-uae-black-100 text-opacity-60">Sample description text</p>
      </div>
      <div>
        <button class="bg-tra-blue-50 hover:ring-tra-blue-10 focus:ring-tra-blue-10 text-pure-white-100 focus:ring-4 hover:ring-4 border-transparent h-10 cursor-pointer border inline-flex items-center justify-center px-5 py-3 text-sm leading-4 rounded-md focus:outline-none transition-color duration-200">Button</button>
      </div>
    </div>
  </li>
  <li class="p-6">
    <div class="flex items-center justify-between">
      <div class="pr-6 flex-1">
        <p class="text-lg">List item on one line.</p>
        <p class="text-uae-black-100 text-opacity-60">Sample description text</p>
      </div>
      <div>
        <button class="bg-tra-blue-50 hover:ring-tra-blue-10 focus:ring-tra-blue-10 text-pure-white-100 focus:ring-4 hover:ring-4 border-transparent h-10 cursor-pointer border inline-flex items-center justify-center px-5 py-3 text-sm leading-4 rounded-md focus:outline-none transition-color duration-200">Button</button>
      </div>
    </div>
  </li>
</ul>

Horizontal Rule (Divider)

or
<div class="relative">
  <hr class="text-uae-black-100 text-opacity-20" />
  <span class="text-lg inline-block bg-pure-white-100 leading-none px-3 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 -mt-0.5">or</span>
</div>

Header large

Entity logo

<header>
  <div class="flex items-center justify-between">
    <div class="flex items-center">
      <div class="w-12 h-12 bg-uae-black-20 rounded-full" />
      <h1 class="font-medium text-xl ml-6">Entity logo</h1>
    </div>
    <div>
      <div class="w-14 h-14 bg-uae-black-20 rounded" />
    </div>
  </div>
  <nav class="mt-8 flex items-center justify-between">
    <ul class="flex items-center">
      <li class="pr-6">Services</li>
      <li class="px-6">E-Participation</li>
      <li class="px-6">Open Data</li>
      <li class="pl-6">About TRA</li>
    </ul>
    <ul class="flex items-center">
      <li class="pr-3">
        <div class="w-6 h-6 bg-uae-black-20 rounded-full" />
      </li>
      <li class="px-3">
        <div class="w-6 h-6 bg-uae-black-20 rounded-full" />
      </li>
      <li class="pl-3">
        <div class="w-6 h-6 bg-uae-black-20 rounded-full" />
      </li>
    </ul>
  </nav>
</header>

Header Small

<header>
  <nav class="mt-8 flex items-center justify-between">
    <div class="flex items-center">
      <div class="w-12 h-12 bg-uae-black-20 rounded-full" />
      <h1 class="font-medium text-xl ml-6">Entity logo</h1>
    </div>
    <ul class="flex items-center">
      <li class="pr-6">Services</li>
      <li class="px-6">E-Participation</li>
      <li class="px-6">Open Data</li>
      <li class="pl-6">About TRA</li>
    </ul>
    <ul class="flex items-center">
      <li class="pr-2">
        <div class="w-6 h-6 bg-uae-black-20 rounded-full" />
      </li>
      <li class="px-2">
        <div class="w-6 h-6 bg-uae-black-20 rounded-full" />
      </li>
      <li class="px-2">
        <div class="w-6 h-6 bg-uae-black-20 rounded-full" />
      </li>
      <li class="pl-4">
        <div class="w-14 h-14 bg-uae-black-20 rounded-lg" />
      </li>
    </ul>
  </nav>
</header>

Footer Large

Services

  • Government
  • Business
  • Individual
  • Training & Lectures

More Info

  • Initiatives
  • TRA Blog
  • Polls and Surveys
  • Open Data

About TRA

  • About TRA
  • Contact Us
  • Contact Support
  • Our Partners

Working Hours

Sunday to Thursday

7:30am - 2:30pm

© 2021 TRA
Privacy Policy
Terms and Conditions
Online Chat
<footer>
  <div class="flex">
    <div class="w-2/6">
      <div class="w-64 h-8 bg-uae-black-10 rounded-lg" />
      <div class="mt-8 w-24 h-16 bg-uae-black-10 rounded-lg" />
    </div>
    <div class="w-1/6">
      <p class="text-uae-black-100 text-opacity-30">Services</p>
      <ul class="mt-4">
        <li>Government</li>
        <li class="mt-2">Business</li>
        <li class="mt-2">Individual</li>
        <li class="mt-2">Training & Lectures</li>
      </ul>
    </div>
    <div class="w-1/6">
      <p class="text-uae-black-100 text-opacity-30">More Info</p>
      <ul class="mt-4">
        <li>Initiatives</li>
        <li class="mt-2">TRA Blog</li>
        <li class="mt-2">Polls and Surveys</li>
        <li class="mt-2">Open Data</li>
      </ul>
    </div>
    <div class="w-1/6">
      <p class="text-uae-black-100 text-opacity-30">About TRA</p>
      <ul class="mt-4">
        <li>About TRA</li>
        <li class="mt-2">Contact Us</li>
        <li class="mt-2">Contact Support</li>
        <li class="mt-2">Our Partners</li>
      </ul>
    </div>
    <div class="w-1/6">
      <p class="text-uae-black-100 text-opacity-30">Working Hours</p>
      <p class="mt-4 text-sm">Sunday to Thursday</p>
      <p class="text-sm">7:30am - 2:30pm</p>
      <div class="mt-8 w-28 h-12 bg-uae-black-10 rounded-lg" />
    </div>
  </div>
  <div class="mt-16 flex items-center">
    <div class="flex items-center w-2/6">
      <div class="w-5 h-5 bg-uae-black-10 rounded-full mr-3" />
      <div class="w-5 h-5 bg-uae-black-10 rounded-full mr-3" />
      <div class="w-5 h-5 bg-uae-black-10 rounded-full mr-3" />
      <div class="w-5 h-5 bg-uae-black-10 rounded-full" />
    </div>
    <div class="w-1/6">
      <span class="text-sm text-uae-black-100 text-opacity-30">© 2021 TRA</span>
    </div>
    <div class="w-1/6">
      <a href="#" class="text-sm text-uae-black-100 text-opacity-30">Privacy Policy</a>
    </div>
    <div class="w-1/6">
      <a href="#" class="text-sm text-uae-black-100 text-opacity-30">Terms and Conditions</a>
    </div>
    <div class="w-1/6">
      <a href="#" class="text-sm text-uae-black-100 text-opacity-30">Online Chat</a>
    </div>
  </div>
</footer>