Pricing

<div class="mx-auto md:mx-auto md:grid grid-flow-col grid-cols-2 gap-6">
  <div class="border rounded shadow mb-4">
    <div class="px-6 py-8">
      <h2 class="text-4xl text-center font-bold mb-6">Starter</h2>

      <p class="opacity-50 w-64 text-center">
        Perfect for getting started with algotrading
      </p>
    </div>

    <div class="bg-gray-100 px-6 py-10 text-center">
      <span class="text-5xl font-semibold font-serif">$14.99</span>
      <span class="opacity-50 text-sm">/month</span>
    </div>

    <div class="px-6 py-4">
      <ul>
        <li class="my-6">
          <svg class="fill-current inline-flex bg-green-200 text-green-600 rounded-full py-2 px-2 w-8 h-8 mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
            <path d="M0 11l2-2 5 5L18 3l2 2L7 18z" />
          </svg>
          <span>Unlimited Backtest simulations</span>
        </li>
        <li class="my-6">
          <svg class="fill-current inline-flex bg-green-200 text-green-600 rounded-full py-2 px-2 w-8 h-8 mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
            <path d="M0 11l2-2 5 5L18 3l2 2L7 18z" />
          </svg>
          <span>Optimization mode</span>
        </li>
        <li class="my-6">
          <svg class="fill-current inline-flex bg-green-200 text-green-600 rounded-full py-2 px-2 w-8 h-8 mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
            <path d="M0 11l2-2 5 5L18 3l2 2L7 18z" />
          </svg>
          <span>2 trading strategies</span>
        </li>
        <li class="my-6">
          <svg class="fill-current inline-flex bg-green-200 text-green-600 rounded-full py-2 px-2 w-8 h-8 mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
            <path d="M0 11l2-2 5 5L18 3l2 2L7 18z" />
          </svg>
          <span>Unlimited trading pairs</span>
        </li>
        <li class="my-6">
          <svg class="fill-current inline-flex bg-green-200 text-green-600 rounded-full py-2 px-2 w-8 h-8 mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
            <path d="M0 11l2-2 5 5L18 3l2 2L7 18z" />
          </svg>
          <span>Community support</span>
        </li>

        <li class="my-6">
          <svg class="fill-current inline-flex bg-gray-200 text-gray-600 rounded-full py-2 px-2 w-8 h-8 mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
            <path d="M0 11l2-2 5 5L18 3l2 2L7 18z" />
          </svg>
          <span class="text-gray-500 line-through">Live-trading mode</span>
        </li>

        <li class="my-6">
          <svg class="fill-current inline-flex bg-gray-200 text-gray-600 rounded-full py-2 px-2 w-8 h-8 mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
            <path d="M0 11l2-2 5 5L18 3l2 2L7 18z" />
          </svg>
          <span class="text-gray-500 line-through">Early access</span>
        </li>

        <li class="my-6">
          <svg class="fill-current inline-flex bg-gray-200 text-gray-600 rounded-full py-2 px-2 w-8 h-8 mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
            <path d="M0 11l2-2 5 5L18 3l2 2L7 18z" />
          </svg>
          <span class="text-gray-500 line-through">24/7 phone support</span>
        </li>
      </ul>
    </div>

    <a href="#" class="border-2 border-indigo-600 font-semibold text-indigo-600 rounded text-center block mx-4 mb-4 py-4">
      Order Now
    </a>
  </div>

  <div class="border rounded shadow mb-4">
    <div class="h-1 bg-indigo-600 rounded-t"></div>

    <div class="px-6 py-8">
      <h2 class="text-4xl text-center font-bold mb-6">Pro</h2>

      <p class="opacity-50 w-64 text-center">
        Perfect for those whom are serious about their trading career
      </p>
    </div>

    <div class="bg-gray-100 px-6 py-10 text-center">
      <span class="text-5xl font-semibold font-serif">$49.99</span>
      <span class="opacity-50 text-sm">/month</span>
    </div>

    <div class="px-6 py-4">
      <ul>
        <li class="my-6">
          <svg class="fill-current inline-flex bg-green-200 text-green-600 rounded-full py-2 px-2 w-8 h-8 mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
            <path d="M0 11l2-2 5 5L18 3l2 2L7 18z" />
          </svg>
          <span>Unlimited Backtest simulations</span>
        </li>
        <li class="my-6">
          <svg class="fill-current inline-flex bg-green-200 text-green-600 rounded-full py-2 px-2 w-8 h-8 mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
            <path d="M0 11l2-2 5 5L18 3l2 2L7 18z" />
          </svg>
          <span>Optimization mode</span>
        </li>
        <li class="my-6">
          <svg class="fill-current inline-flex bg-green-200 text-green-600 rounded-full py-2 px-2 w-8 h-8 mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
            <path d="M0 11l2-2 5 5L18 3l2 2L7 18z" />
          </svg>
          <span>10 trading strategies</span>
        </li>
        <li class="my-6">
          <svg class="fill-current inline-flex bg-green-200 text-green-600 rounded-full py-2 px-2 w-8 h-8 mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
            <path d="M0 11l2-2 5 5L18 3l2 2L7 18z" />
          </svg>
          <span>Unlimited trading pairs</span>
        </li>
        <li class="my-6">
          <svg class="fill-current inline-flex bg-green-200 text-green-600 rounded-full py-2 px-2 w-8 h-8 mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
            <path d="M0 11l2-2 5 5L18 3l2 2L7 18z" />
          </svg>
          <span>Community support</span>
        </li>

        <li class="my-6">
          <svg class="fill-current inline-flex bg-green-200 text-green-600 rounded-full py-2 px-2 w-8 h-8 mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
            <path d="M0 11l2-2 5 5L18 3l2 2L7 18z" />
          </svg>
          <span>Live-trading mode</span>
        </li>
        <li class="my-6">
          <svg class="fill-current inline-flex bg-green-200 text-green-600 rounded-full py-2 px-2 w-8 h-8 mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
            <path d="M0 11l2-2 5 5L18 3l2 2L7 18z" />
          </svg>
          <span>Early access</span>
        </li>
        <li class="my-6">
          <svg class="fill-current inline-flex bg-green-200 text-green-600 rounded-full py-2 px-2 w-8 h-8 mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
            <path d="M0 11l2-2 5 5L18 3l2 2L7 18z" />
          </svg>
          <span>24/7 phone support</span>
        </li>
      </ul>
    </div>

    <a href="#" class="shadow-lg border-2 border-indigo-600 bg-indigo-600 font-semibold text-white rounded text-center block mx-4 mb-4 py-4">
      Order Now
    </a>
  </div>
</div>