JSFiddle - React, Tailwind, and code Playground

HTML

<template>
  <div class="container">
    <div class="menu">
      <div class="menu_title">Pizza menu</div>
      <!-- SIZE -->
      <p class="size_title">Choose pizza size:</p>
      <div 
      class="size_pizza" 
      v-for="(size,index) in sizes" 
      :key="index"
      >
        <label>
          <input 
          type="radio" 
          name="radinp" 
          :value = "size"
          v-model="choosenSize"
          >
          <span class="stitle">{{ size.title }}</span>
          <span class="scost"> {{ size.cost }}$ </span>
        </label>
      </div>
      <!-- toppings -->
      <p class="topping_title">Choose topping:</p>
      <div 
      class="toppings" 
      v-for="topping in toppings" 
      :key="topping.id"
      >
        <label>
          <input 
          type="checkbox" 
          id="toppingcheck"
          v-model="choosenTopping"
          :value = "topping"
          >
          <span class="t_title">{{ topping.title }}</span>
          <span class="t_cost">{{ topping.cost }}$</span>
        </label>
      </div>
      {{ choosenTopping }}
    </div>
  </div>
</template>

CSS

<style>
  *{
    margin: 0;
    padding: 0;
  }
  .container{
    background-color: #C4C4C4;
    display: flex;
    justify-content: center;
    height: 975px;
  }

  .menu {
    margin-top: 15px;
    margin-bottom: 10px;
    width: 760px;
    height: 900px;
    background-color: #fff;
    border-radius: 18px;
  }

  .menu_title{
    text-align: center;
    font-size: 36px;
    margin-top: 30px;
    text-transform: uppercase;
  }

/* SIZE_PIZZA */
  .size_title{
    font-size: 24px;
    margin-left: 47px;
    margin-top: 36px;
  }

  .size_pizza{
    margin-left: 47px;
    margin-top: 15px;
  }

  .stitle{
    font-size: 20px;
    text-transform: capitalize;
    margin-left: 10px;
  }

  .scost{
    color: #8A8A8A;
    margin-left: 5px;
    font-size: 20px;
  }
/* TOPPING */
  .topping_title{
    font-size: 24px;
    margin-left: 47px;
    margin-top: 76px;
  }

  .toppings{
    margin-left: 47px;
    margin-top: 15px;
  }

  .t_title{
    font-size: 20px;
    text-transform: capitalize;
    margin-left: 10px;
  }

  .t_cost{
    color: #8A8A8A;
    margin-left: 5px;
    font-size: 20px;
  }
</style>

JavaScript

<script>
export default {
  name: 'App',
  data(){
    return{
      choosenSize: '',
      choosenTopping: [],
      sizes: [
      {
        title: 'Small',
        cost: 5,
      },
      {
        title: 'Medium',
        cost: 10,
      },
      {
        title: 'Large',
        cost: 15,
      },
      {
        title: 'Extra large',
        cost: 20,
      },
      ],
      toppings: [
        {
          title: 'Mashrooms',
          cost: 1,
          id: 1,
        },
        {
          title: 'Olivies',
          cost: 1,
          id: 2,
        },
        {
          title: 'Tomato',
          cost: 0,
          id: 3,
        },
        {
          title: 'tuna',
          cost: 3,
          id: 4,
        },
        {
          title: 'Pineapple',
          cost: 3,
          id: 5,
        },
        {
          title: 'Seafood',
          cost: 5,
          id: 6,
        },
        {
          title: 'Pepperoni',
          cost: 2,
          id: 7,
        },
        {
          title: 'Bacon',
          cost: 1,
          id: 8,
        },
        {
          title: 'Onion',
          cost: 0,
          id: 9,
        },
        {
          title: 'Mozzarella',
          cost: 3,
          id: 10,
        },
      ],
    }  
},
computed: {
  summary() {
    return `${this.choosenSize.cost} + ${this.choosenTopping.cost}`
  }
}
}
</script>