I love a unique radio situation from time to time. I utilized this once and wanted to save for later.

First hide the radios and add some colors.

<style>
  /* HIDE RADIO */
  .card-deck [type=radio] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
  }

  /* IMAGE STYLES */
  .card-deck [type=radio] + .card {
    cursor: pointer;
    box-sizing: border-box;
    border: 2px solid rgba(0, 0, 0, .125);
  }

  .card-deck [type=radio] + .card:hover {
    border: 2px solid #b7ffeb;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, .175) !important;
  }

  /* CHECKED STYLES */
  .card-deck [type=radio]:checked + .card {
    border: 2px solid #0062ff;
  }
</style>

Next add your cards! Here is some rails code to make it work

<div class="card-deck mb-3 text-center row g-0 justify-content-center">
  <% {
         'combo' => "Both Vendor and Seller",
         'seller' => "You are a Seller",
         'vendor' => "You are a Vendor/Supplier",
     }.each do |team_type, help_text| %>
    <label class="col-12">
      <%= radio_button_tag("team[team_type]", team_type, team_type == f.object.team_type, {onchange: "this.form.submit()"}) %>
      <div class="card text-dark box-shadow">
        <div class="card-header">
          <h4 class="card-title pricing-card-title m-0">
            <%= team_type.to_s.titleize %>
          </h4>
        </div>
        <div class="card-body px-0">
          <strong>
            <%= help_text.html_safe %>
          </strong>
        </div>
      </div>
    </label>
  <% end %>
</div>