user interface

You can't change background color in normal Rich Text Display fields, but a very-close alternative option would be to implement a "cards as tabs" setup which is also very common (and about the same level of difficulty as what you already have).  Here's an example of a live robust implementation:

With this style of setup you'd have full control over the coloring and formatting of the tab (between "selected versus unselected" at least).

As an aside: the post title of just "user interface" is not very helpful or descriptive of your question (and has probably been used, verbatim, 50 times previously here in Community).  I strongly urge everyone to create a unique (though still concise) post title that at least gives the flavor of the thing you're asking in your post, which would then contain additional details / screenshots / etc.

Thanks for your reply.

Need one more suggestion. I see lot of space before and after the string/content in each Card. I don't see any option to reduce the size. Am I missing anything here.

Please advise.

Thanks.

Put the cardLayout inside a columnLayout if you haven't done that already, and you can set the width of the column layout to different values. 

Another option is to put some empty column layouts (like in comments) on the right of your cards. That will decrace the size of each column and therefore of each card.   

Other alternative you can go with Buttons, that suits exactly for your requirement.

a!localVariables(
  local!isSelected: 1,
  a!buttonArrayLayout(
    align: "START",
    buttons: {
      a!buttonWidget(
        label: "My Sports",
        size: "SMALL",
        style: if(local!isSelected = 1, "PRIMARY", "LINK"),
        saveInto: { a!save(local!isSelected, 1) }
      ),
      a!buttonWidget(
        label: "My Blogs",
        size: "SMALL",
        style: if(local!isSelected = 2, "PRIMARY", "LINK"),
        saveInto: { a!save(local!isSelected, 2) }
      ),
      a!buttonWidget(
        label: "All Other",
        size: "SMALL",
        style: if(local!isSelected = 3, "PRIMARY", "LINK"),
        saveInto: { a!save(local!isSelected, 3) }
      )
    }
  )
)

Other alternative you can go with Buttons, that suits exactly for your requirement.

a!localVariables(
  local!isSelected: 1,
  a!buttonArrayLayout(
    align: "START",
    buttons: {
      a!buttonWidget(
        label: "My Sports",
        size: "SMALL",
        style: if(local!isSelected = 1, "PRIMARY", "LINK"),
        saveInto: { a!save(local!isSelected, 1) }
      ),
      a!buttonWidget(
        label: "My Blogs",
        size: "SMALL",
        style: if(local!isSelected = 2, "PRIMARY", "LINK"),
        saveInto: { a!save(local!isSelected, 2) }
      ),
      a!buttonWidget(
        label: "All Other",
        size: "SMALL",
        style: if(local!isSelected = 3, "PRIMARY", "LINK"),
        saveInto: { a!save(local!isSelected, 3) }
      )
    }
  )
)